Question

我正在尝试从一些动态生成的数据创建一个简单的条形图，但我不能让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

中的示例代码绘制它们

Answer 1

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

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

D3不能在玉石中渲染简单的条形图

1 个答案: