Question

我正在努力在数据更新期间保持d3选择正确。

我有一系列节点，我在d3中操作。我想标记它们，所以我已经使每个节点成为一个包含节点本身和文本标签的组。我正在创建的svg结构是：

<svg>
    <g class="container">
        <g class="node-group">
            <circle class="node">
            <text class="label">
        </g>
        <g class="node-group">
            ...
        </g>
        ...
     </g>
</svg>

我能够进行初始数据连接。

var map_svg = d3.select("body").append("svg");
var container = map_svg.append("g")
    .attr("class", "container");
var node_group = container.selectAll(),
    node = node_group.selectAll(),
    label = node_group.selectAll();

// Initial data join
node_group = node_group.data(graph.nodes)
                .enter()
                .append("g")
                .attr("class", "node-group");
node = node_group.append("circle")
                .attr("class", "node")
                .attr("r", 12);

label = node_group.append("text")
                .attr("class", "node-label")
                .text(function (d) {
                    return d.name
                });

加入后，我仍然可以使用正确的元素和node_group访问node，label和parentNode变量。我的问题出现在我进行更新时 - 我parentNode和node选项丢失了label。

// Update nodes with new data
var node_group_update = node_group.data(graph.nodes);
var node_group_new = node_group_update.enter()
                    .append("g")
                    .attr("class", "node-group");
node_group_update.exit().remove();
node_group_new.append("circle")
                    .attr("class", "node")
                    .attr("r", 12);

node_group_new.append("text")
                    .attr("class", "label")
                    .text(function (d) {
                        return d.name
                    });

node_group = node_group_update;

// Try to reconstruct the node and label vars, but they don't turn out
// correct because the parentNode is 'html' rather than 'g'
node = d3.selectAll('.node');
label = d3.selectAll('.label');

如何在更新node之后选择具有正确parentNode的所有节点？我可以不使用selectAll吗？

如何在d3连接中正确选择更新元素的子元素？

0 个答案: