D3的JavaScript/SVG第三部分問題

Question

我下面的」讓我們做一些圖表「作一介紹D3的第三部分教程。部分教程要求通過TSV進行數據插入。鑑於我沒有看到這是我最終的用例，我正試圖用下面的代碼使用簡單的javascript數組修改教程。但是，當我在瀏覽器中呈現時，頁面上沒有顯示任何內容。任何人都可以對此有所瞭解嗎？

這裏的教程鏈接，一些參照原代碼：http://bost.ocks.org/mike/bar/3/

我的JS代碼：

 <script> 
     var data = [4,8,15,16,23,42,57,89,100,160]; 

     var width = 960, 
      height = 500; // have to make sure variables are case sensitive 

     var y = d3.scale.linear() 
      .domain([0, d3.max(data)]) // scaling based on max value 
      .range([height, 0]); 

     var chart = d3.select(".chart") 
      .attr("width", width) 
      .attr("height", height); 

     var barWidth = width/data.length; 

     var bar = chart.selectAll("g") 
        .data(data) 
       .enter().append("g") 
        .attr("transform", function(d,i) { return "translate(" + i * barWidth + ",0)";}); 

     bar.append("rect") 
      .attr("y", function(d) { return y(d.value); }) 
      .attr("width", barWidth - 1) 
      .attr("height", function(d) { return height - y(d.value); }); 

     bar.append("text") 
      .attr("x", barWidth/2) 
      .attr("y", function(d) { return y(d.value) + 3; }) 
      .attr("dy", ".75em") 
      .text(function(d) { return d.value; }); 

     function type(d) { 
      d.value = +d.value; 
      return d; 
     } 
     </script> 

Answer 1

您複製引用了一個名爲屬性value確定要畫什麼的代碼。你創建的數據沒有這個，只是數據。所以無論你有沒有d.value，你只需要參考d。

完成演示here。您使用的數字對於數據Array，而邁克·博斯托克的例子，他是用Object的Array S（例如，var data = [{value: 30}, ...]）

Answer 2

您的問題來源於這樣的事實。因此，你需要改變的d.value所有情況下d在你的代碼，因爲你的數據是不是不再是一個Object，但只是一個數字。

bar.append("rect") 
    .attr("y", function(d) { return y(d); }) // <---- delete .value 
    .attr("width", barWidth - 1) 
    .attr("height", function(d) { return height - y(d); }); // <---- delete .value 

bar.append("text") 
    .attr("x", barWidth/2) 
    .attr("y", function(d) { return y(d) + 3; }) // <---- delete .value 
    .attr("dy", ".75em") 
    .text(function(d) { return d; }); // <---- delete .value 

進行這些更改產生以下條形圖：