我正在尝试制作一个 d3 javascript,它创建一个颜色取决于数据集的矩形。所有的矩形都彼此相邻,例如:
[][][][][][]
[][][][][][]
我的脚本可以为我的所有数据创建矩形,但它会像这样溢出:
[][][][][][][][][][][][][][][][][][][][][][][][][][][]
如何为我的 d3 脚本创建宽度和高度属性,使其看起来更像
[][][][]
[][][][]
[][][][]
这是我的脚本:
<script>
//for whatever data set
var data = [];
//Make an SVG Container
var svgContainer = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("width", 38)
.attr("height", 25);
//Draw the rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 0)
.attr("y", 5)
.attr("width", 38)
.attr("height", 25);
</script>
最佳答案
您必须更改 x
和 y
属性。
.attr("x", function(d, i) {
return 5 + (i%itemPerLine) * widthRect;
})
.attr("y", function(d, i) {
return 5 + Math.floor(i/itemPerLine) * heightRect;
})
(itemPerLine 是每行rect
的个数)
参见 this fiddle例如
关于javascript - 使用 D3.js 创建矩形图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39583209/