Добавление текста к недавно добавленного элемента

Question

Это весь код, который нужно:

https://raw.github.com/alignedleft/d3-book/master/chapter_09/25_adding_values.html

Он ссылается D3 локально, но и для более быстрой работы вы можете просто refrence его со своего сайта, как это вместо:

<script src="http://d3js.org/d3.v3.min.js"></script> 

это создаст некоторую диаграмму, как это:

Обратите внимание на недавно добавленные диаграммы на те, у которых на них нет текстовой метки.

Часть кода, добавление меток в самом конце кода и заключается в следующем:

  svg.selectAll("text") 
       .data(dataset) 
       .transition() 
       .duration(500) 
       .text(function(d) { 
        return d; 
       }) 
       .attr("x", function(d, i) { 
        return xScale(i) + xScale.rangeBand()/2; 
       }) 
       .attr("y", function(d) { 
        return h - yScale(d) + 14; 
       }); 

В качестве упражнения я пытаюсь изменить код, так что я могу обновить новые бары и с их текстовые данные, но все еще не могли понять это. Как бы Вы это сделали?

Answer 1

Вам необходимо обработать выбор .enter(). Код будет выглядеть следующим образом.

svg.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function(d) { 
       return d; 
      }) 
      .attr("x", function(d, i) { 
       return xScale(i) + xScale.rangeBand()/2; 
      }) 
      .attr("y", function(d) { 
       return h - yScale(d) + 14; 
      }); 

Посмотрите на this tutorial для получения дополнительной информации.