我使用 d3.js 创建了一个动态的力导向网络地图。地图最初获取所有网络节点并正确显示它们,网络接口显示为将节点连接在一起的线。这一切都很好。
当用户决定过滤属于特定项目的网络接口时,这就是我遇到问题的地方。我重复使用相同的 d3.layout.force 实例并运行最初创建地图的相同函数,但使用新数据。为了简单起见,我对源代码进行了很多压缩,删除了所有与问题无关的内容。
var _this = {
graphLayout : d3.layout.force(),
node : null,
link : null,
selectedProject : null,
/*****************************************************
Initialize engine
*****************************************************/
render : function() {
// Creates the SVG container, sets up markers and gradients and whatnots
// unnecessary for me to include here I think.
// Start simulation
_this.update();
// Apply event handling and set up onTick
},
/*****************************************************
Perform a data update. This will read data from an
external url, and redraw all graphics.
*****************************************************/
update : function(project) {
if (project !== undefined) {
_this.selectedProject = project;
}
url = 'someService'+(!project ? '/GetNodes' : '/GetNodesByProjectId?projectId='+project.ProjectNumber);
d3.json(url, function(json) {
// Update nodes based on data
// Apply data to graph layout
_this.graphLayout
.nodes(json.nodes)
.links(json.links)
// Even more parameters which are unnecessary for this question
.start();
// Join lines config
_this.link = d3.select(" svg > .lineContainer").selectAll("g.link").data(_this.graphLayout.links());
var group = _this.link.enter().append("svg:g")
// More attributes and click event handling for the lines
.attr('id', function(d) { return d.InterfaceNumber; });
group.append("svg:line");
_this.link.exit().remove();
// Node rendering config
_this.node = d3.select(" svg > .nodeContainer").selectAll("g.node").data(_this.graphLayout.nodes());
group = _this.node.enter().append("svg:g")
// More attributes and click event handling for the nodes
.attr('id', function(d) { return d.Id; });
group.append("svg:path")
.attr("d", _this.nodeSVGPath)
.attr("fill", function(d) { return "url(#blackGradient)"; });
这是我遇到问题的地方:
// Add label to node
group.append('svg:text').attr('class', 'label').attr('transform', 'translate(25, 30)').text(function(d,i) { return d.Name; });
_this.node.exit().remove();
});
},
第二次调用 update 时,此处放置在 .text 上的函数(d,i)似乎没有运行。是在 d3 中缓存了一些东西,还是我错过了什么?
这里的问题是节点(或行)包含正确的数据对象,但节点上呈现的文本不匹配,这使我相信d3js完全重用了svg对象,而是与新更新的数据交换了数据.