我正在尝试使用 json url 创建条形图。关于印象和时间。我认为我在 .data(data) 中没有正确引用数据,如何从 d3 中的 json 文件访问展示次数字段?
var url = "https://script.google.com/macros/s/AKfycbwy56QiQwyfkkaLFWZ33QHVieAHhtLJYNa_AzKcCBr-J7Catgv2/exec?id=1vQsWQPUET20KcgeRKgs5NOOBngqLeUuNTHI1bWi5Et8&sheet=Sheet1";
d3.json(url, function(data) {
console.log(data.Sheet1[0]);
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d) {
return d.Impressions
})
.attr("height", 45)
.attr("y", function(d, i) {
return i * 50
})
.attr("fill", "blue")
});
最佳答案
您必须将一个数组传递给函数 data()。因此,由于 data
是一个对象:
Object {Sheet1: Array[71]}
您的数据应改为 data.Sheet1
。检查演示:
var url = "https://script.google.com/macros/s/AKfycbwy56QiQwyfkkaLFWZ33QHVieAHhtLJYNa_AzKcCBr-J7Catgv2/exec?id=1vQsWQPUET20KcgeRKgs5NOOBngqLeUuNTHI1bWi5Et8&sheet=Sheet1";
d3.json(url, function (data) {
var scale = d3.scale.linear()
.domain([0, d3.max(data.Sheet1, function(d){ return d.Impressions})])
.range([0, 500]);
var canvas = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500)
canvas.selectAll("rect")
.data(data.Sheet1)
.enter()
.append("rect")
.attr("width",function(d){return scale(d.Impressions)})
.attr("height", 6)
.attr("y",function(d,i){return i*7})
.attr("fill","blue")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
PS:我在您的代码中添加了一个比例。
关于javascript - 将json解析为条形图d3js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40218351/