在 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 的 selection.each() 来定位每个 3d 片段。此方法有一些用于执行各种功能的有用变量。

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 变量对您很有用。您可以在 if 语句中使用它来更改每个第 3 个元素的属性。您修改后的代码可能是...

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

var offset = 5;

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
            })
            .each(function(d,i) {
                if (i !== 0 && i % 3 === 0) {
                   d3.select(this).attr('transform', 'translate(0,' + offset + ')');
                   offset += 5;
                }
            })

Here is a working codepen.

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

In D3js, how do I cumulative add on every nth bound data value?

call

modulo

d3.js