Question

我们说我得到了这个节点淡出的代码：

var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
})
    .on("click", collapse);

nodeEnter.append("rect")
    .attr("class", "rect")
    .attr("width", 170)
    .attr("height", 80)
    .attr("x", -85)
    .attr("y", -80)
    .attr("opacity", 0)
    .style("fill", "#989898")
    .style("stroke", "#65737e");

nodeEnter.append("text")
    .attr("class", "title")
    .attr("x", -80)
    .attr("y", -70)
    .attr("opacity", 0)
    .attr("fill", "black")
    .attr("dy", ".71em")
    .text(function (d) {
    return d.title;
});

nodeEnter.append("text")
    .attr("class", "name")
    .attr("x", -80)
    .attr("y", -70)
    .attr("opacity", 0)
    .attr("fill", "black")
    .attr("dy", "1.86em")
    .text(function (d) {
    return d.firstName + " " + d.lastName;
});

将会像这样更新：

var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
});

nodeUpdate.select("rect")
    .attr("width", 170)
    .attr("height", 80)
    .attr("x", -85)
    .attr("y", -80)
    .attr("opacity", 1)
    .style("fill", "#989898")
    .style("stroke", "#65737e");

nodeUpdate.select("text")
    .attr("class", "title")
    .attr("x", -80)
    .attr("y", -70)
    .attr("opacity", 1)
    .attr("fill", "black")
    .attr("dy", ".71em")
    .text(function (d) {
    return d.title;
});

nodeUpdate.select("text")
    .attr("class", "name")
    .attr("x", -80)
    .attr("y", -70)
    .attr("opacity", 1)
    .attr("fill", "black")
    .attr("dy", "1.86em")
    .text(function (d) {
    return d.firstName + " " + d.lastName;
});

我现在的问题是我在一个节点上附加了多个文本元素（标题和名称），但是只会显示最后一个选定的文本元素，因为其他文本元素似乎被覆盖了，因为我没有选择特定的文本元素。我尝试在追加时保存变量中的每个元素，并按类选择它们，但这些选项都不起作用。有人有解决方案吗？

Answer 1

问题在于您有多个text元素需要单独处理，但您在选择器中无法区分它们。您可以使用已分配给它们的类，即代替

轻松地完成此操作

.select("text")

你会做的

.select("text.title")

和

.select("text.name")

D3节点更新 - 如何在多个节点中选择特定的文本元素？

1 个答案: