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

我是D3新手。我遵循这个伟大的教程，制作了一个灵活的图表，无论创建了多少条，它都会填充到您的宽度和高度大小。（‘新图表’）

我无法使用自己的数据。这是使用非常简单的数据集制作条形图的教程代码：

        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'];})

var w=500；
var h=100；
var=1；
风险值数据=[
{“名字”：“国王的演讲”，“时间”：118}，
{“姓名”：“贫民窟的百万富翁”，“时间”：120}，
{“名字”：“爱情中的莎士比亚”，“时间”：122}，
{“名字”：“火焰战车”，“时间”：123}，
]
d3.选择（'svg g.group'）
.selectAll（'rect'）
.数据（数据）
.输入（）
.append（'rect'）
.attr（'x'，函数（d，i）{返回i*（w/data.length）}）
.attr（'y'，函数（d）{返回h-d['time']；}）
.attr（'width'，w/data.length-barPadding）
.attr（'height'，function（d）{返回d['time']；}）

---

我知道这对你们很多人来说都很简单，但我在这上面花了太长时间，你们会帮我度过难关的！谢谢

您有一个打字错误，半列应该在

['time']

之外：

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

应该是

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

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

问题更新后编辑：

---

您的javascript代码应该围绕

和

进行包装，非常感谢！然而，它仍然不起作用。我将更新问题以删除这些错误。ThanksI已尝试添加console.log（数据）；最后，当我查看时，我得到了未捕获的SyntaxError：意外标记我对此做了一些研究，它可能是一个未关闭的标记等，但在我看来一切正常。对不起，再说一遍，我是初学者。你的代码是否被包装在标签上？在您粘贴的代码中看起来不是这样。2.在uncaught syntax error旁边，您有与未能运行的代码对应的文件名和行号。这是您应该用来调试的内容，也是您应该在问题中包含的内容。很抱歉没有在我的代码中添加，我试图缩短问题的长度。你真是一颗宝石，非常感谢你的帮助。