javascript - 使用D3创建具有复杂数据集的灵活条形图

我是D3的新手。我正在遵循这份出色的教程，该教程将制作一个灵活的图表，无论创建多少条，该图表都可以填充您的宽度和高度。（“新图表”）。http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_new_chart

我在使用自己的数据时遇到麻烦。这是使用非常简单的数据集制作条形图的教程代码：

        var w = 500;
        var h = 100;
        var barPadding = 1;

        var data = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                        11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

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

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

我认为我的行不通，与教程代码的data.length部分有关：

        .attr("x", function(d, i) {return i * (w / data.length);

也可能是我从数据中请求“时间”的方式。这是我的代码：

  <div id="chart">
  <svg width="800" height="600"><g class="group"></g>
  </svg>
  </div>

  var w = 500;
  var h = 100;
  var barPadding = 1;

  var data = [
  {"name": "The Kings speech", "time": 118},
  {"name": "Slumdog Millionaire", "time": 120},
  {"name": "Shakespeare in Love", "time": 122},
  {"name": "Chariots of Fire", "time": 123},
  ]

  d3.select('svg g.group')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', function(d, i) {return i * (w / data.length)})
  .attr('y', function(d) {return h - d['time'];})
  .attr('width', w / data.length - barPadding)
  .attr('height', function(d) {return d['time'];})

我知道这对很多人来说很简单，但是我花了很长时间在此上，您将对我有所帮助！谢谢

最佳答案

您有错别字，分号应位于['time']之外：

.attr('y', function(d) {return h - (d['time';])})

应该

.attr('y', function(d) {return h - d['time'];})

您应该查看开发人员控制台中显示的错误消息以识别错误。

问题更新后编辑：

您的JavaScript代码应围绕<script type="text/javascript">和</script>

关于javascript - 使用D3创建具有复杂数据集的灵活条形图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27291447/