Как добавить текст в SVG

Question

Я пытаюсь добавить текст в svg по нижеприведенному коду для этого я следующий код, но он не работает.

var svg = d3.select("#chart"); 

     xScale.domain(data.map(function(d){return d.key;})) 
     yScale.domain([0,d3.max(data,function(d){return d.doc_count;})]) 

     svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+","+height+")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+",0)") 
      .call(yAxis); 

     svg.attr("width",width + margin.left + margin.right) 
      .attr("height",height + margin.top + margin.bottom) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     svg.selectAll("rect") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("x",function(d){return margin.left + xScale(d.key)}) 
      .attr("y",function(d){return yScale(d.doc_count)}) 
      .attr("width", xScale.rangeBand()) 
      .attr("height", function(d) { return height - yScale(d.doc_count); }) 
      .attr("fill","teal"); 

     svg.selectAll("text") 
      .data(data) 
      .enter() 
      .append("text") 
      .text(function(d){return d.doc_count;}) 

В конце, когда я вижу дом, нет тегов текстовых элементов.

Answer 1

Вы вызываете вызов (xAxis) и вызываете (yAxis), который будет создавать элементы <text>, поэтому, когда вы скажете d3.selectAll («текст»), он выбирает те элементы, которые создаются вызовом (xAxis) и вызывает (yAxis).

так что предположим, что ваш счет данных равен 5, тогда он уже имеет 5 <text> элементов, и он не добавит новый.

Обновите свой код

 svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+","+height+")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+",0)") 
      .call(yAxis); 

после кода ниже

svg.selectAll("text") 
     .data(data) 
     .enter() 
     .append("text") 
     .text(function(d){return d.doc_count;}) 

Answer 2

Проблема в коде так же, как Soham отметил в своем ответе. Когда вы используете селектор элементов text, он будет возвращать все элементы внутри вашего SVG, включая тексты осей, которые автоматически создаются с помощью d3 при создании осей.

Таким образом, наилучшим выбором будет использование другого селектора для дополнительных текстовых меток.

svg.selectAll("text.label") //Or simply (".label") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("class","label") 
    .text(function(d){return d.doc_count;}) 

В этом случае вам также необходимо указать атрибуты текстовой позиции.

Если вы хотите разместить текстовые элементы относительно прямых элементов, вы можете создать элементы группы для группировки прямоугольных и текстовых элементов и установить атрибут позиции (преобразования) элементов группы.