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

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

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

Demo

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;
    })

Answer 2

有比使用for循环更好的选择。但是，无论如何here you go

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)
}

d3 - 画线n次

2 个答案: