从简单的JSON字符串加载D3.js数据

Question

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

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

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
}

据我所知,我只需要对我的entitiesJson做一些事情,以便对数据进行数据处理,以便图表可以绑定到它.

UPDATE

我正在取得一些进展.我从JSON插入了我的实体,图形开始呈现出新的形状.

目前以下代码中断:

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

这导致:

错误:属性y ="NaN"的值无效

错误:属性height ="NaN"的值无效

Answer 1

用于远程data.json替换:

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

Answer 2

没有一种简单的方法可以对任何给定的json进行数据处理,因为并非所有json对象都是相同的形状.

从形状上看,我的意思是数据的组织方式.例如,既'{"foo" : 1, "bar" : 2}'和'{"names" : ["foo", "bar"], "values" : [1, 2]}'可用于存储相同的数据,但一个存储一切中的对象,其中所述对象键对应于数据点的名称,和一个使用单独的数组来存储名称和值,与具有对应的条目公共数组索引.

但是,您可以通过一般过程将json转换为数据.首先,你需要解析你的json.这可以使用javascript标准JSON对象完成.使用JSON.parse(myJson)如果它已经上传到客户端从您的JSON对象获取数据.d3.json(my/json/directory, fn(){})可以加载和解析你的json,所以如果你从服务器的其他地方加载它,这可能是让json进入对象的更好方法.

一旦将json打包到javascript对象中,您仍然需要对其进行数据处理,这将取决于您的数据.它期望的d3是某种形式的数组:[dataPoint1, dataPoint2, ...].对于我上面给出的两个例子,你想要的数组看起来像这样:

[{'name' : 'foo', 'value' : 1}, {'name' : 'bar', 'value' : 2}]

我的数组中有一个元素用于每个数据点,有两个属性:value和name.(在您的示例中,您需要属性letter和frequency)

对于我的每个示例,我将使用不同的函数来创建数组.这条线共同点:

var rawData = JSON.parse(myJson);

我的第一个json可以用这个函数打包:

var key;
var data = [];

for(key in rawData){
    if(rawData.hasOwnProperty(key)){
        data.push({'name' : key, 'value' : rawData[key]});
    }
}

对于第二个例子,我想循环遍历我的对象的每个属性names,和values.我的代码可能如下所示:

var i;
var data = [];

for(i = 0; i < rawData.names.length; i++){
    data.push({'name' : rawData.names[i], 'value' : rawData.values[i]});
}

这两个都将产生我原始JSON的数据版本,然后我可以在d3中使用它.

Answer 3

对于D3js v2或v3(不确定哪一个).

声明您的数据集

var dataset = { 
    "first-name": "Stack",
    "last-name": "Overflow",
}; // JSON object
var dataset = [ 5, 10, 15, 20, 25 ]; // or array

如文档所述,您可以使用以下任一方法:

数组或对象的数组,或返回值数组的函数

绑定它

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

在Scott Murray的D3教程#Binding数据中有更多解释.

data()函数适用于选择,更多信息可以在官方文档中找到:selection.data([values [,key]]).