gpt4 book ai didi

javascript - D3没有在jade中渲染简单的条形图

转载 作者:行者123 更新时间:2023-12-03 12:06:27 26 4
gpt4 key购买 nike

我正在尝试从一些动态生成的数据创建一个简单的条形图,但我无法让 D3 渲染该图表。这是我的 Jade 布局:

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 中的示例代码绘制它们。

最佳答案

我非常确定 d3.tsv 是异步的,因此当其余 d3 代码运行时,dataset 中可能没有任何数据。

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

关于javascript - D3没有在jade中渲染简单的条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25168557/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com