Question

我使用d3.js创建了一个动态的力导向网络地图。映射最初提取所有网络节点并正确显示它们，网络接口显示为将节点连接在一起的线。一切正常。

当用户决定对属于特定项目的网络接口进行过滤时，这就是我遇到问题的地方。我重用了相同的d3.layout.force实例并运行最初创建map的相同函数，但是使用了新数据。为了简单起见，我已经大量压缩了源代码，删除了与问题无关的所有内容。

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();
        });
    },

第二次调用更新时，放在.text上的函数（d，i）似乎不会运行。这里有什么东西被缓存在这里，或者我错过了什么？

这里的问题是节点（或行）包含正确的数据对象，但节点上显示的文本不匹配，这让我相信d3js已经重用了svg对象完整，但用新更新的数据进行了交换。

Answer 1

是的，你错过了这一重要事实。 enter（）函数创建一个没有元素的数据子选择。这是你应该做的事情：

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

// now set the text for all g.node > g > text elements, new or old
_this.node.select('g > text').text(function(d,i) { return d.Name; });

_this.node.exit().remove();

因为group是_this.node的enter（）子选择，所以它永远不会包含在每次调用之前创建的元素。最后，在您设置文本的位置，使用_this.node而不是group选择所有文本节点，new或old。这有帮助吗？

如何防止节点缓存

1 个答案: