d3-画n次线

Question

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

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

建议将非常有用。

小提琴

这是代码：

var height = 500;
    var width = 500;

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


    var line = svgContianer.append("line")
                            .attr("x1", 20)
                            .attr("x2", 20)
                            .attr("y1", 100)
                            .attr("y2", 0)
                            .attr("stroke", "#000")
                            .attr("stroke-width", 2)

提前感谢。

Answer 1

有比使用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)
}

Answer 2

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

此外，对于条形码，您还需要将形状渲染转换为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;
    })