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（＆＃34; tick＆＃34;）作为节点，标签和组，例如：

node.attr（＆＃34; x＆＃34;，function（d）{return d.x - d.width / 2 + pad;}） .attr（＆＃34; y＆＃34;，function（d）{return d.y - d.height / 2 + pad;}）;

并且它正常工作但我不确定如何更新路径，因为每个滴答都需要重新计算多个值。

2）在每个tick上更新这些前进路径的正确方法是什么？

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

d3 step-before fiddle

Answer 1

我认为这实际上与造型有关。

Fiddle

添加了此css代码：

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

D3绘制其他元素

1 个答案: