D3没有在jade中渲染简单的条形图答案

【问题标题】：D3 not rendering simple bar chart in jadeD3没有在jade中渲染简单的条形图
【发布时间】：2014-08-06 19:26:27
【问题描述】：

我正在尝试从一些动态生成的数据创建一个简单的条形图，但我无法让 D3 呈现图表。这是我的翡翠布局：

extends layout

block content
  h1= title
  script(src="http://d3js.org/d3.v3.min.js")
  p Coverage: #{coverage}
  .chart
  script(type='text/javascript').
    var id =!{JSON.stringify(id)};
    var file="temp/"+id+".coverageHist.txt";
    var dataset = [];
    d3.tsv(file, function(data) {
      data.forEach(function(d) {
        dataset.push(d[0]);
      })
    });
    console.log(dataset);
    d3.select(".chart").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .style("height", function(d) {
        var barHeight = d * 5;
        return barHeight + "px";
      });

这是渲染后的 HTML：

<!DOCTYPE html><html><head><title>Results</title><link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css"><link rel="stylesheet" href="/stylesheets/style.css"><link rel="stylesheet" href="/bootstrap/js/bootstrap.min.js"></head><body><h1>Results</h1><script src="http://d3js.org/d3.v3.min.js"></script><p>Coverage: 1.98612
</p><div class="chart"></div><script type="text/javascript">var id ="123c52299cd5cac9b858890be1e4271908bd93ac";
var file="temp/"+id+".coverageHist.txt";
var dataset = [];
d3.tsv(file, function(data) {
  data.forEach(function(d) {
    dataset.push(d[0]);
  })
});
console.log(dataset);
d3.select(".chart").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")
  .style("height", function(d) {
    var barHeight = d * 5;
    return barHeight + "px";
  });</script></body></html>

有什么想法吗？我将值推送到一个数组，然后使用Bar Chart tutorial中的示例代码绘制它们

【问题讨论】：

标签： javascript node.js d3.js pug

【解决方案1】：

我很确定 d3.tsv 是异步的，所以当您的 d3 代码的其余部分运行时，您可能在 dataset 中没有任何数据。

尝试将 console.log(dataset) 之后的所有内容放入 d3.tsv 的回调中。

【讨论】：