javascript - 在 d3 中使用箭头连接形状

Question

我正在尝试使用箭头连接 3 个基本的海关形状，我用了这个 arrow作为引用。

我想复制 lucidchart 的行为对于移动任何形状，我已经看到很多使用力布局的示例，但我不确定这是否适合我要实现的目标，因此我们将不胜感激。

这是我的代码:

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

这是 fiddle供引用。提前致谢。

Answer 1

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

您有data 数组，它代表场景中的所有形状(也称为模型)，包括它们的 x 和 y 位置。目标应该是在拖动形状时更新那些 x 和 y 属性，然后重新渲染所有形状(通过通常的进入、更新、退出例程)。

如果每个形状都没有明确的 x 和 y(例如在树或分区布局的情况下)，或者每个形状的 x 和 y 应该被转换为不同的 x 和 y(就像力布局的情况)。

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