d3 Bar Chart добавьте текст в бар

Я следил за учебником, чтобы составить гистограмму Скотта Мюррея из alignedleft. У меня проблемы с моим набором данных и добавлением набора данных в панель в виде текста.d3 Bar Chart добавьте текст в бар

Изображение ниже: 1 гистограмма: из учебника, 2-я гистограмма: как я хочу отображать текст.

enter image description here

Вот мой код до сих пор:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Tutorial d3 bar chart!</title> 
     <script type="text/javascript" src="d3/d3.v3.js"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      //Width and height 
      var w = 500; 
      var h = 100; 
      var i = 0; 
      var barPadding = 1; 

      var dataset = [ 
         {key:"Department1", value:6234490}, 
         {key:"Department 2", value:9700}, 
         {key:"Department 3", value:2954}, 
      ]; 

      //Width and height 
      var w = 500; 
      var h = 100; 
      var barPadding = 1; 

      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect") 
       .attr("x", function(d, i) { 
        return i * (w/dataset.length); 
       }) 
       .attr("y", function(d) { 
        return h - (d * 4); 
       }) 
       .attr("width", w/dataset.length - barPadding) 
       .attr("height", function(d) { 
        return d * 4; 
       }) 
       .attr("fill", function(d) { 
        return "rgb(0, 0, " + (d * 10) + ")"; 
       }); 

      svg.selectAll("text") 
       .data(dataset) 
       .enter() 
       .append("text") 
       .text(function(d) { 
        for(int i = 0; i < dataset.length; i++){ 
         return d[i].key; 
        } 

       }) 
       .attr("text-anchor", "middle") 
       .attr("x", function(d, i) { 
        return i * (w/dataset.length) + (w/dataset.length - barPadding)/2; 
       }) 
       .attr("y", function(d) { 
        return h - (d * 4) + 14; 
       }) 
       .attr("font-family", "sans-serif") 
       .attr("font-size", "11px") 
       .attr("fill", "white"); 
     </script> 
    </body> 
</html>

Я пытался добавить текст в этой части:

svg.selectAll("text") 
       .data(dataset) 
       .enter() 
       .append("text") 
       .text(function(d) { 
        for(int i = 0; i < dataset.length; i++){ 
         return d[i].key; 
        } 

       })

Но это просто дает мне эту ошибку: enter image description here

Надеюсь, лет вы, ребята, можете мне помочь.

источник

2015-06-11 Elvira

Каждая функция в d3js обеспечивает доступ к данным и индексу. Просто используйте этот

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

EDIT

svg.selectAll("g") 
      .data(dataset) 
      .enter() 
      .append("g") 
      .append("rect") 
      .attr("x", function(d, i) { 
       return i * (w/dataset.length); 
      }) 
      .attr("y", function(d) { 
       return h - (d * 4); 
      }) 
      .attr("width", w/dataset.length - barPadding) 
      .attr("height", function(d) { 
       return d * 4; 
      }) 
      .attr("fill", function(d) { 
       return "rgb(0, 0, " + (d * 10) + ")"; 
      }) 
      .append("text") 
      .text(function(d) {     
        return d.key; 
      }) 
      .attr("text-anchor", "middle") 
      .attr("x", function(d, i) { 
       return i * (w/dataset.length) + (w/dataset.length - barPadding)/2; 
      }) 
      .attr("y", function(d) { 
       return h - (d * 4) + 14; 
      }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "11px") 
      .attr("fill", "white");

источник

2015-06-11 18:31:59 Pbd

Тем не менее, не показывает баров .. :( – Elvira

я получаю эти ошибки, когда я взглянуть на поджигатель на «все» http://i59.tinypic.com/23jl9op.png, означает неожиданное значение. – Elvira

На панели отображаются без текста? И, кстати, текст и прямоугольник должны быть в . Проверьте изменения – Pbd

Попробуйте изменить Int к вар, ИНТ не существует в JavaScript.

источник

2015-06-11 19:01:15 soote

О, lol .. thanks :) – Elvira

d3 Bar Chart добавьте текст в бар

ответ

Смежные вопросы