使用D3中的箭头连接形状

Question

我正在尝试使用箭头连接3种基本的海关形状，我以此箭头为参考。

我想复制可移动任何形状的透明图表的行为，我已经看到了很多使用力布局的示例，但是我不确定这是否是我想要实现的目标的理想选择，所以指导将不胜感激。

这是我的代码：

var data =[{"x":"100.0","y":"100.0","name":"shape-0","id":"543fe9949382ed4a16c38cf3","type":"startEvent","index":0},{"x":"610","y":"100.0","name":"shape-1","id":"543fe9949382ed4a16c38cf5","type":"endEvent","index":1},{"x":"318","y":"93","name":"first task","id":"543fe9a09382ed4a16c38cf6","type":"task","index":2}];

var links = [
    {"source":{"x":136,"y":118},
     "target":{"x":318,"y":118}},
    {"source":{"x":428,"y":118},
     "target":{"x":610,"y":118}}];

var node = svg.selectAll('g').data(data)
    .enter()
    .append(function(d){
        return shapes[d.type](d).node();
    });

var link = svg.selectAll('.link')
.data(links).enter().append('g').attr('class', 'node')
.append('line')
.attr('class','path')
.style('stroke-width', 2)
.attr('marker-end', 'url(#arrow)');

link.selectAll("line").attr("x1", function(d){
      return d.source.x;
    }).attr("y1", function(d){
      return d.source.y;
    }).attr("x2", function(d){
      return d.target.x;
    }).attr("y2", function(d){
      return d.target.y;
    })

//arrows
svg.append('svg:defs').append('svg:marker')
.attr('id', 'arrow').attr('viewBox', '0 0 10 10')
.attr('refX', 0).attr('refY', 5)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 8)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.append('svg:path')
.attr('d', 'M 0 0 L 10 5 L 0 10 z');


svg.append('line')
.attr('x1', 5)
.attr('x2', 50)
.attr('y1', 5)
.attr('y2', 50)
.style('stroke', 'black')
.attr('stroke-width', 2)
.attr('marker-end', 'url(#arrow)');

这是供参考的小提琴 。 提前致谢。

Answer 1

据我了解的问题，我认为您根本不需要布局。 如果您要使用清晰的图表拖动功能，则不会。

您拥有data数组，它是场景（又称模型）中所有形状的表示形式，包括它们的x和y位置。 目标应该是在拖动形状时更新那些x和y道具，然后重新渲染所有形状（通过通常的enter，update，exit例程）。

如果每种形状没有明确的x和y（例如在树或分区布局的情况下），或者如果每种形状的x和y都应转换为不同的x和y，则布局的概念将变得必要。 y（与强制布局一样）。

要实现拖动，可以使用d3.behavior.drag() ，如本示例所示 。 但是与该示例不同的是，您需要修改d的x和y属性值，这是data形状的定义-而不是示例中DOM元素的位置。