javascript - D3 通过引用强制布局绑定(bind)不同步

Question

我有一个强制布局，我正在向其中动态添加节点。

TL;DR:我的图表的数据绑定(bind)似乎在节点和链接之间不同步。是否有任何使用对象引用而不是 ID 或名称动态添加和减去节点来设置力图的示例？

我见过的所有示例都使用 ID 来映射节点和链接，但文档说(添加了强调):

Note: the values of the source and target attributes may be initially specified as indexes into the nodes array; these will be replaced by references after the call to start.

就我而言，我有一个 Node 类和一个体现节点和链接的 Link 类。这些链接具有对节点的实际引用，因此我假设我不需要做任何其他事情来关联节点和链接。

原力网络正在布局网络。但似乎给定 link.source 和 link.target 处的节点不是应该存在的节点，这导致我认为我对 d3 绑定(bind)的假设是不正确的。我是否未能在强制机制中设置(或重置)某些全局状态？

我的图表更新代码是这样的:

GraphView.prototype.updateGraph = function(graph) {
var graph_view = this;

// restart the force layout
this.force
    .nodes(graph.nodes)
    .links(graph.links);

// update the links
this.link_selection = this.link_selection.data(graph.links);
this.link_selection.exit().remove();
this.link_selection.enter()
    .append("svg:path")
    .attr("class", "link");

// update the nodes
this.node_selection = this.node_selection.data(graph.nodes);
this.node_selection.exit().remove();
var node_enter = this.node_selection.enter()
    .append("g")
    .attr("class", "node")
    .on('mouseover', this._showTooltip.bind(this))
    .on('mouseout', this._hideTooltip.bind(this))
    .on('click', this._selectNode.bind(this))
    .on('mousedown', this._handleMouseDown.bind(this))
    .on("contextmenu", function(data, index) { graph_view._showContextMenu(data, index); })
    .call(this.force.drag);

// create outer circle
node_enter
    .append("circle")
    .attr("class", "annulus")
    .style('fill', function(d) { return graph_view.nodeColor(d); })
    .style('r', function(d) { return graph_view.nodeRadius(d); })
    .attr("x", 0)
    .attr("y", 0);

// start ticking...
this.force.start();
};

勾选方法:

GraphView.prototype._tick = function(e) {
this.link_selection
    .attr("d", function(d) {
    var dx = d.target.x - d.source.x;
    var dy = d.target.y - d.source.y;
    var dr = Math.sqrt(dx * dx + dy * dy);
    return "M " + d.source.x + " " + d.source.y +
        " A " + dr + " " + dr + " 0 0 1 "
        + d.target.x + " " + d.target.y;
    });
this.node_selection
    .attr('transform', function(d) {
    return 'translate(' + d.x + ',' + d.y + ')' });
};

Answer 1

我想我明白发生了什么事。

首先，我没有看到任何使用 d3.layout.force 对象引用的示例的原因是它不起作用:关联链接和节点的机制要求每个链接和每个节点提供一个不可变的句柄，即 id。 (是的，您可以使用数组索引，但这是一个不同的问题)。

稍微令人惊讶的是，不可变句柄可以是任何东西，只要它对于其相应的节点或链接是唯一的。事实上，节点 id 和链接 id 之间不需要有任何关系——它们仅在设置数组索引时使用。

我希望有人提供更完整的答案，以便我可以打勾。但如果他们不这样做，我会尝试提供更完整的描述。这有点神奇，但并不是完全神奇。