从一个简单的JSON字符串加载D3.js数据 [英] Loading D3.js data from a simple JSON string

问题描述

图库中的大多数示例从TSV文件加载数据。

Most of the examples in gallery load data from TSV files.

如何转换以下内容以使用本地json变量而不是TSV数据？

How can I convert the following to use a local json variable instead of TSV data?

d3.tsv("data.tsv", function(error, data) {

    var myEntitiesJson = getEntitiesJson(); // <------ use this instead of "data"
    data.forEach(function(d) {
        d.frequency = +d.frequency;
    });

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    ...

    svg.selectAll(".bar")
        .data(data)     // <----- bind to myEntities instead
}

根据我可以告诉，我只需要对我的实体json做一些事情，以便 data-fy ，以便图表可以绑定到它。

As far as I can tell, I just need to do something to my entitiesJson, in order to data-fy it so that the chart could bind to it.

UPDATE

我取得了一些进展，我从JSON插入了我的实体，新形状。

I am making some progress. I plugged in my entities from JSON and the graph is starting to take new shape.

目前以下代码断开：

svg.selectAll(".bar")
    .data(myEntities)  // <-- this is an array of objects
    .enter().append("rect")

这导致：

属性y =NaN的值无效

Error: Invalid value for attribute y="NaN"

错误：属性height =NaN的值无效

Error: Invalid value for attribute height="NaN"

推荐答案

for remote data.json
replace：

for remote data.json replace :

d3.tsv("data.tsv", function(error, data) {...}

与：

d3.json("data.json", function(error, data) {
    console.log(data); // this is your data
});

用于本地数据：

var myData = { {date:'2013-05-01', frequency:99},
               {date:'2013-05-02', frequency:24} };

function draw(data) {
    console.log(data); // this is your data
}

draw(myData);

这篇关于从一个简单的JSON字符串加载D3.js数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！