d3 - draw lines n number of times

本文关键字：number of times lines draw d3 更新时间：2024-05-18

我有一条使用d3绘制的垂直线。假设我想像条形码一样把这行重复几次。我该怎么做？

我知道它必须使用for来完成，但我不知道如何做到这一点。

建议会很有帮助。

FIDDLE

这是代码：

var高度=500；var宽度=500；var svgContianer=d3.select（"body"）.append（"svg"）.attr（"宽度"，宽度）.attr（"高度"，高度）var line=svgContianer.append（"line"）.attr（"x1"，20）.attr（"x2"，20）.attr（"y1"，100）.attr（"y2"，0）.attr（"笔划"，"#000"）.attr（"笔划宽度"，2）

提前谢谢。

如果您想创建条形码，D3的方法是将每一行（元素）与其宽度（数据）绑定，然后使用D3的enter阶段来构建它们。

此外，对于条形码，您还需要将shape-rendering转换为crispEdges。

演示。

var height = 500;
var width = 500;
var svgContianer = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)

var line = svgContianer.selectAll("line")
    .data([1, 2, 1, 3, 2, 1, 3, 2, 1, 3, 2, 4, 3, 1, 2, 2, 2, 1, 3, 2])
    .enter()
    .append("line")
    .attr("x1", function (d, i) {
      return 20 + 5 * i;
    })
    .attr("x2", function (d, i) {
      return 20 + 5 * i;
    })
    .attr("y1", 100)
    .attr("y2", 0)
    .attr("stroke", "#000")
    .attr("stroke-width", function (d) {
      return d;
    })

有比使用for循环更好的选项。但是，在任何情况下，你在这里

var height = 500;
var width = 500;
var count = 10, padding = 5;
var svgContianer = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height)
for(var i = 0; i < count; ++i) {
    var line = svgContianer.append("line")
                            .attr("x1", padding*i)
                            .attr("x2", padding*i)
                            .attr("y1", 100)
                            .attr("y2", 0)
                            .attr("stroke", "#000")
                            .attr("stroke-width", 2)
}