从简单的 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
}

据我所知，我只需要对我的 entityJson 做一些事情，以便对其进行 data-fy 以便图表可以绑定到它。

更新

我正在取得一些进展。我从 JSON 插入我的实体，图表开始呈现新的形状。

目前以下代码中断：

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

这是导致：

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

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

Answer 1

用于远程数据.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

作为stated by the doc，您可以使用：

数字或对象数组，或返回值数组的函数

绑定

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

更多解释Scott Murray's D3's tutorial#Binding data。

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

Answer 4

您可以将 json 更改为将数据分配给全局值的 javascript 文件。以https://bl.ocks.org/d3noob/5028304为例：

发件人：

<script>
.....
// load the data
d3.json("sankeygreenhouse.json", function(error, graph) {

    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

收件人：

<script src="graphData.js"></script>
<script>
.....
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

请注意，我们已经消除了对回调的需求。

json 文件是“sankeygreenhouse.json”：

{
"links": [
  {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},

现在，在“graphData.js”中：

var graph = {
   "links": [
      {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},

Answer 5

只需将数据更改为对象数组，如下所示：

let data = [{"apples":53245,"oranges":200},{"apples":28479,"oranges":200},{"apples":19697,"oranges":200},{"apples":24037,"oranges":200},{"apples":40245,"oranges":200}]

并注释掉d3.tsv("data.tsv", function(error, data) {...

Answer 6

为什么不按照 Rob here 的描述简单地将您的 json 转换为 tsv？

d3 需要数据，或者换句话说，需要特定格式的数据：tsv。解决问题的最简单方法是将数据从 json 格式化为 tsv，这可以使用 Rob 的 cmets 轻松完成。