当我想更改值时，我无法在我的 svg 中选择（“文本”）

Question

我有一个问题，我可以将文本附加到其中SVG，但是当我想要更改它时，我似乎无法选择它进行更改。上面的代码d3.select("button")和bar.transition. 有人可以帮我弄清楚如何选择，"text"所以当我单击按钮时它将使用新数据集吗？var bar = svg.selectAll("rect")  .data(dataset)  .enter();bar.append("rect")  .attr("x", function(d) {    return xScale(d[0]);  })  .attr("y", function(d) {    return yScale(d[2]);  })  .attr("width", xScale.bandwidth())  .attr("height", function(d) {    return height - yScale(d[2]);  })  .attr("class", function(d) {    var s = "bar ";    if (d[2] < 50) {      return s + "bar1";    } else if (d[2] < 100) {      return s + "bar2";    } else {      return s + "bar3";    }  });bar.append("text")  .attr("dy", "1.3em")  .attr("x", function(d) {    return xScale(d[0]) + xScale.bandwidth() / 2;  })  .attr("y", function(d) {    return yScale(d[2]);  })  .attr("text-anchor", "middle")  .attr("font-family", "sans-serif")  .attr("font-size", "11px")  .attr("fill", "black")  .text(function(d) {    return d[2];  });d3.select("button")  .on("click", function() {    var dataset = [      ['Jun-19', 8.6, 21.7],      ['Jul-19', 8.68, 17.98],      ['Aug-19', 8.9, 25.38],      ['Sep-19', 6.38, 11.6],      ['Oct-19', 10.36, 65.08],      ['Nov-19', 22.36, 125.72],      ['Dec-19', 26.52, 112.22],      ['Jan-20', 21.08, 76.1],      ['Feb-20', 6, 44, 19.625],      ['Mar-20', 4.68, 8.95],      ['Apr-20', 7.4, 15.94],      ['May-20', 7.36, 18.36]    ];    bar = svg.selectAll("rect")      .data(dataset);    bar.transition()      .attr("x", function(d) {        return xScale(d[0]);      })      .attr("y", function(d) {        return yScale(d[2]);      })      .attr("width", xScale.bandwidth())      .attr("height", function(d) {        return height - yScale(d[2]);      })我试过使用bar.selectAll("text")，但它根本不起作用，但如果我使用svg.selectAll("text")它，它会从我那里拿走滴答声Axis.Left并移动它。

Answer 1

您不能将text节点附加为rect节点的子节点 - 因此 SVG 可能永远不会呈现。尝试g在每个条形图中使用一个节点，然后将rect和添加text到该节点。barContainer例如，你可以给它 class 。

至于text从轴中选择和忽略那些，请按照@Andrew Reid 在他的评论中所说的那样做并使用barContainer.selectAll("text"). 或者，您可以为所有标签赋予类label，然后使用svg.selectAll(".label").