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数组，它代表了场景中的所有形状（a.k.a模型），包括它们的x和y位置。目标应该是在拖动形状时更新那些x和y道具，然后重新渲染所有形状（通过常用的输入，更新，退出例程）。

如果每个形状没有明确的x和y（如树或分区布局的情况），或者每个形状的x和y应该转换为a，那么布局的概念将变得必要不同的x和y（就像强制布局一样）。

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

使用d3中的箭头连接形状

1 个答案: