Question

总的来说，我距离D3只有几周了，但是我已经在这里坐了几个小时，现在调试仍然无济于事。

请注意埋在匿名函数中的两个d语句。 'dummy'属性中的一个返回值，而var myEdges = [ { in: "934e3e11-3f9b-11e9-b2b9-c54f58764873", out: "936807a1-3f9b-11e9-b2b9-c54f58764873" }, ] svg.selectAll('path:not([elementType=temp-path])').data(myEdges) .enter().append('path') .attr("fill", "none") .attr("stroke", "blue") .style("stroke-width", "2px") .attr('dummy', function(d) { console.log(d); return d;}) .attr('d', d3.linkVertical() .x(function(d) { console.log(d); return d.in; }) .y(function(d) { return d.out; }));属性中的一个不返回值。

这两个有什么区别？

public function images()
{
    return $this->morphMany('App\Image', 'owner');
}

Answer 1

问题不在于未传递基准（d）属性：而是。这里的问题仅仅是链接生成器期望的数据结构。

如果您查看API，您会发现链接生成器默认情况下期望这样的数据结构：

{
  source: foo,
  target: baz
}

顺便说一句，您可以使用link.source()和link.target()来更改这些属性。

因此，如果我们更改您的数据结构，则该控制台将运行：

var svg = d3.select("svg");

var myEdges = [{
  source: { in: "934e3e11-3f9b-11e9-b2b9-c54f58764873",
    out: "936807a1-3f9b-11e9-b2b9-c54f58764873"
  },
  target: { in: "934e3e11-3f9b-11e9-b2b9-c54f58764873",
    out: "936807a1-3f9b-11e9-b2b9-c54f58764873"
  }
}]

svg.selectAll('path:not([elementType=temp-path])').data(myEdges)
  .enter().append('path')
  .attr("fill", "none")
  .attr("stroke", "blue")
  .style("stroke-width", "2px")
  .attr('dummy', function(d) {
    console.log("dummy here: " + d);
    return d;
  })
  .attr('d', d3.linkVertical()
    .x(function(d) {
      console.log(d);
      return d.in;
    })
    .y(function(d) {
      return d.out;
    }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

最后，这些其他答案可以帮助您了解链接生成器所需的数据结构：https://stackoverflow.com/a/44760465/5768908和https://stackoverflow.com/a/51424331/5768908

创建路径时丢失数据绑定

1 个答案: