Question

我创建了Fimily Tree，除了链接外，一切似乎都很好。我拖动节点时没有更新。链接结束只是模式到不同的方向，并没有跟随节点。

此外，当我点击节点时，它的笔划会发生变化，但也会改变文字笔划，在rect内部，我只需要更改矩形笔划。

我准备Feedly

render() {
  ...
  <div>
    {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
  </div>
  ...

解决：

结果feedle

Answer 1

在你的拖拽功能中：

分别注册拖拽x和y inavriable dx和dy。

function dragmove(d) {
    var x = d3.event.x;
    var y = d3.event.y;

    d3.select(this).attr("transform", "translate(" + x + "," + y + ")");

    datas[d.key].dx =d3.event.x;
    datas[d.key].dy =d3.event.y;
    link.attr("d", connect);
}

现在，当您为该行创建d属性时，请考虑在拖动函数中计算dx和dy。

function connect(d, i) {
    var dsx=d.source.dx ? d.source.dx:0;
    var dsy=d.source.dy ? d.source.dy:0;
    var dtx=d.target.dx ? d.target.dx:0;
    var dty=d.target.dy ? d.target.dy:0;
    return     "M" + (d.source.x + dsx) + "," + (height - d.source.y +dsy)
             + "V" + (height - (3*(d.source.y+dsy) + 4*(d.target.y +dty))/7)
             + "H" + (d.target.x+dtx)
             + "V" + (height - (d.target.y- dty));
};

但是我建议你使用d3.interpolate而不是在connect函数中进行计算。

工作代码here

Answer 2

您可以直接访问rect作为childNodes对象：

function click() {
    if (!selected) {
        selected = this;
        d3.select(selected.childNodes[0]).style('stroke', 'white');
    } else {
        d3.select(selected.childNodes[0]).style('stroke', 'black');
        selected = this;
        d3.select(selected.childNodes[0]).style('stroke', 'white');
    }
}

JSFiddle

D3：更新路径链接位置

2 个答案: