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

我得到了一个看起来像蝴蝶结的形状，而不是一个先行路径（见附件）。显然，我做错了什么，我假设它与在 data 方法中使用 _.each 有关。

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

我希望能够拖动元素并更新这些路径。我将 d3.on("tick") 用于节点、标签和组，例如：

node.attr("x", function (d) { return d.x - d.width / 2 + pad; }) .attr("y", function (d) { return d.y - d.height / 2 + pad; });

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

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

如果我的描述中有任何不清楚的地方，我创建了一个小提琴：

d3 step-before fiddle

Answer 1

我认为这实际上与样式有关。

Fiddle

添加了这个css代码：

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