当我想更改值时，我无法在我的 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").&nbsp;或者，您可以为所有标签赋予类label，然后使用svg.selectAll(".label").