解析json到条形图d3js [英] parsing json to bar chart d3js

问题描述

我正在尝试使用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（身体）。追加（SVG）
 .attr（宽度，500）
 .attr（身高，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 。检查演示：

<预类=片段码 - JS郎JS prettyprint-覆盖> VAR URL =https://script.google .COM /宏/ S / AKfycbwy56QiQwyfkkaLFWZ33QHVieAHhtLJYNa_AzKcCBr-J7Catgv2 / EXEC ID = 1vQsWQPUET20KcgeRKgs5NOOBngqLeUuNTHI1bWi5Et8&放大器;表工作表Sheet1 =; d3.json（URL，功能（数据）{VAR规模= d3.scale.linear（）。域（[0，D3的.max（data.Sheet1，功能（D）{返回d.Impressions}）]）.range（[0，500]）; VAR帆布= d3.select（机构）追加（SVG）.attr。 （宽度，500）.attr（身高，500）canvas.selectAll（矩形）。数据（data.Sheet1）。进入（）.append（矩形）.attr（宽度功能（y，函数（d，i）{return i * 7}）.attr（fill，蓝色）}）;

<预类=片段 - 代码HTML语言，HTML prettyprint-覆盖> < SCRIPT SRC = https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js\"></script>

PS：我向您的代码添加了一个比例。

I'm trying to create a bar chart using the json url. With respect to impressions and time. I don't think I'm referencing the data correctly at .data(data) how do I access the impressions field from json file in d3?

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

解决方案

You have to pass an array to the function data(). Thus, since data is an object:

Object {Sheet1: Array[71]}

Your data should be data.Sheet1 instead. Check the demo:

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: I added a scale to your code.

这篇关于解析json到条形图d3js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！