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 

进行这些更改产生以下条形图：