Question

我正在尝试使用json网址创建条形图。关于印象和时间。我不认为我在.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")
});

Answer 1

您必须将数组传递给函数data（）。因此，因为data是一个对象：

Object {Sheet1: Array[71]}

您的数据应该是data.Sheet1。查看演示：

＆＃13;

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")
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

PS：我在你的代码中添加了一个比例。

解析json到条形图d3js

1 个答案: