D3绘制步骤-其他元素之间的先于路径

Question

我在多维数组中有以下形式的数据：

data = [
  [
    {
     "x": 329, "y": 484.8333333333333
    },
    {
     "x": 439, "y": 484.8333333333333
    },
    {
      "x": 439, "y": 484.8333333333333
    },
    {
      "x": 549, "y": 484.8333333333333
    }
  ], [
    {
      "x": 559, "y": 484.8333333333333
    },
    {
      "x": 669, "y": 484.8333333333333
    },
    {
      "x": 669, "y": 484.8333333333333
    },
    {
      "x": 779, "y": 484.8333333333333
    }
  ], [
    {
      "x": 329, "y": 313.8333333333333
    },
    {
      "x": 439, "y": 313.8333333333333
    },
    {
      "x": 439, "y": 253.83333333333331
    },
    {
      "x": 549, "y": 253.83333333333331
    }
  ], [
    {
      "x": 559, "y": 313.8333333333333
    },
    {
      "x": 669, "y": 313.8333333333333
    },
    {
      "x": 669, "y": 253.83333333333331
    },
    {
      "x": 779, "y": 253.83333333333331
    }
  ], etc.
]

每个数组都是连接两个svg元素的前一步路径的坐标。我定义了一个生成路径的函数：

stepFuction = d3.svg.line()
     .x(function(d) { return d.x; })
     .y(function(d) { return d.y; })
     .interpolate("step-before");

我试图像这样实例化这些路径：

step = svg.selectAll("path")
      .data(_.each(stepData, (d) => { return d; }))
      .enter()
      .append("path")
      .attr("class", "line")
      .attr("d", stepFuction);

而不是一步一步的路径，我得到一个保龄球形状(见附件)。显然，我做错了什么，我假设它与在数据方法中使用_.each有关。

1)在数据数组中为每个数组创建一个路径的正确方法是什么？

我希望能够拖动元素，并更新这些路径。对于节点、标签和组，我使用d3.on(“抽签”)，如下所示：

node.attr("x"，函数(d) {返回d.x - d.width /2+ pad；}) .attr("y"，函数(d) {返回d.y - d.height /2+ pad；})；

它工作正常，但我不知道如何更新路径，因为有多个值需要在每个滴答上重新计算。

2)在每个蜱上更新这些步前路径的正确方法是什么？

如果我的描述中有什么不清楚的话，我就做了一把小提琴：

d3阶跃-先小提琴

Answer 1

我认为这实际上与风格有关。

小提琴

添加了以下css代码：

path {
  stroke-width: 1px;
  fill: none;
  stroke: black;
}