如何在D3中绘制五行圆圈？
° ° ° ° ° ° ° ° ° ° ° °
° ° ° ° ° ° ° ° ° ° ° ° °
° ° ° ° ° ° ° ° ° ° ° ° °
° ° ° ° ° ° ° ° ° ° ° ° °
° ° ° ° ° ° ° ° ° ° ° ° °
我的 HTML
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="355px" height="355px" viewBox="0 0 351 351" enable-background="new 0 0 351 351" xml:space="preserve">
<g id="graph">
</g>
</svg>
我是这样开始的:
var svg = d3.select("svg");
var g = svg.select("#graph");
var rectValues = [0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255, 272, 289, 306, 323];
var rect = d3.select("body").select("svg").select("#graph").selectAll("rect")
.data(rectValues);
rect.enter().append("rect")
.attr("rx",100)
.attr("ry",100)
.attr("x", function(d) { return d })
.attr("y", ???)
.attr("width",15)
.attr("height",15);
但我不知道我是否必须包含多个数组(数据)“即使 x 和 y 是相同的值”？
这是我的第一个版本。它有效(!)，但对于进一步的目的而言，它并不是真正有效的版本。
var rectX;
var rectY = 5;
var svg = d3.select("svg");
var g = svg.select("#graph");
for (var index1 = 0; index1<20; ++index1){
rectX = 5;
for (var index2 = 0; index2<20; ++index2) {
d3.select("body").select("svg").select("#graph").append("rect")
.attr("rx",100)
.attr("ry",100)
.attr("x", rectX)
.attr("y", rectY)
.attr("width",15)
.attr("height",15)
rectX=rectX+17;
}
rectY=rectY+17;
}
最佳答案
因为圆圈必须一个一个地放在另一个下面，所以 x 不应该是:
var rectValues = [0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255, 272, 289, 306, 323];
应该是
var rectValues = [0, 17, 34, 51, 68, 0, 17, 34, 51, 68,0, 17, 34, 51, 68,0, 17, 34, 51, 68,0, 17, 34, 51, 68,];
这里我在 5 点后重复 x 值，原因是第 6 个圆应该低于第 1 个圆，第 12 个圆应该低于第 6 个圆。 所以第一圈，第六圈，第十二圈。第 18 个圈 ... 都具有相同的 x 值。
注意:在 D3 中，数据驱动文档 (DOM)，因此名称 Data Driven D文档 (D3)。
制作一个变量yPos
var yPos = 20;
像这样画圈:
d3.select("body").select("svg").select("#graph").selectAll("rect")
.data(rectValues);
rect.enter().append("rect")
.attr("rx",100)
.attr("ry",100)
.attr("x", function(d) { return d })
.attr("y", function(d, i) { return (yPos * parseInt(i/5)) })
.attr("width",15)
.attr("height",15);
看到这一行
.attr("y", function(d, i) { return (yPos * parseInt(i/5)) })
这里的i是正在处理的数组元素的索引。所以这个 parseInt(i/5) 将给我列索引(因此你不需要像你在票证中提到的那样的循环)。
完整的工作代码 here
希望这对您有所帮助!
关于javascript - D3 中带圆圈的两行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33158428/