Я не могу выбрать ("текст") в моем svg, когда я хочу изменить значения

#javascript #html #d3.js

#javascript #HTML #d3.js

Вопрос:

У меня проблема, когда я могу добавить текст, SVG но когда я хочу его изменить, я, похоже, не могу выбрать его для изменения. Код над d3.select("button") all работает так же хорошо, как 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]);
      })
      .attr("class", function(d) {
        var s = "bar ";
        if (d[2] < 30) {
          return s   "bar1";
        } else if (d[2] < 60) {
          return s   "bar2";
        } else {
          return s   "bar3";
        }
      });

    svg.selectAll("text")
      .data(dataset)
      .transition()
      .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];
      });

  });

Я пробовал использовать bar.selectAll("text") , но он вообще не работает, но если я использую svg.selectAll("text") его, он снимает галочки с моего Axis.Left и перемещает его.

1. svg.selectAll("text") не делает различий между галочками или другим текстом, попробуйте присвоить текст, который вы хотите, классу a, и выберите по этому классу, когда вы хотите обновить, в качестве альтернативы, вы можете создать a g для хранения текста и обновленных столбцов и выбрать с помощью g.selectAll("text")

Ответ №1:

Вы не можете добавлять text узлы как дочерние rect узлы узлов — поэтому SVG, вероятно, никогда не отображается. Попробуйте использовать g узел для каждой строки и добавить к нему оба rect и. text barContainer Например, вы можете присвоить ему класс.

Что касается выбора text и игнорирования значений из осей, сделайте так, как сказал @Andrew Reid в своем комментарии и используйте barContainer.selectAll("text") . В качестве альтернативы вы можете присвоить всем меткам класс label , а затем использовать svg.selectAll(".label") .