在D3js中，如何累计添加每个第n个绑定数据值？

Question

我有这个代码，它输出一串由一系列线段组成的直线：

var width = 400;
var height = 100;
var data = [1,1,1,1,1,1,1,1,1,1];
var lineSegments = data.length + 1;

d3.select("body").append("svg")
        .attr({
            width: width,
            height: height
        })
    .selectAll("line")
    .data(data)
    .enter()
        .append("line")
            .attr({
                x1: function (d, i) { return i * (width / lineSegments); },
                x2: function (d, i) { return (i + 1) * (width / lineSegments); },
                y1: function (d, i) { return height / 2; },
                y2: function (d, i) { return height / 2; },
                stroke: "black",
                "stroke-width": 2
            });

我希望每个3d段在y方向上偏移，例如10px，我需要偏移是积累的，即3d元素应该具有偏移10px，第6个元素应该偏移20px等等。

这应该会产生如下这样的一行：

我应该如何修改代码才能使其正常工作？有没有特别的d3方式呢？

Answer 1

您可以使用d3＆＃39; selection.each()来定位每个3d细分受众群。该方法具有一些用于执行各种功能的有用变量。

foo.x = (foo = {n: 2})

在您的特定情况下，line.each(function(d, i) { console.log(i); // prints the current index console.log(d); // prints the data at the current index console.log(this); // prints the current DOM element } 变量对您很有用。您可以在i语句中使用它来更改每个第3个元素的属性。您修改后的代码可能是......

if

Here is a working codepen.