在D3 Sankey中，如何加载from对象或数组而不是json或csv文件？

Level: Beginner.

I'm looking at sankey implemented in D3 and the examples shown seem all to use data from JSON or CSV instead of simply using objects or arrays. The one or two that may do it differently seem to use a long walk around instead of simplifying the matter.

我正在查看在D3中实现的sankey,显示的示例似乎都使用来自JSON或CSV的数据,而不是简单地使用对象或数组。可能采用不同方式的一两个似乎使用长途跋涉而不是简化问题。

Is there a way to just load the data in code instead of having to format data as an external file? Thanks!

有没有办法只在代码中加载数据而不必将数据格式化为外部文件?谢谢!

An example of available code: http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13

可用代码的示例:http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13

1 个解决方案

#1

If you have your data available without doing any async operations then you can achieve this as follows, replace the d3.json line

如果您没有执行任何异步操作就可以获得数据,那么您可以按如下方式实现此目的,替换d3.json行

d3.json("sankey-formatted.json", function(error, graph) {
  // ...
})

With your custom loading function e.g.

使用自定义加载功能,例如

loadData(function (graph) {
  // contents of the function passed to d3.json
})

The function loadData now receives a function as a parameter which should be called with the data you have, which can be a plain JS object

函数loadData现在接收一个函数作为参数,该参数应该使用您拥有的数据调用,该数据可以是普通的JS对象

function loadData(cb) {
  var data = {
   "nodes":[
    {"node":0,"name":"node0"},
    {"node":1,"name":"node1"},
    {"node":2,"name":"node2"},
    {"node":3,"name":"node3"},
    {"node":4,"name":"node4"}
    ],
    "links":[
    {"source":0,"target":2,"value":2},
    {"source":1,"target":2,"value":2},
    {"source":1,"target":3,"value":2},
    {"source":0,"target":4,"value":2},
    {"source":2,"target":3,"value":2},
    {"source":2,"target":4,"value":2},
    {"source":3,"target":4,"value":4}
    ]}

    // invoke the function passed as an argument
    cb(data)
}

This would be the hard way, the easy way would be to get rid of that function and have a graph variable holding the data directly

这将是一个艰难的方法,简单的方法是摆脱该功能,并有一个图形变量直接保存数据

var graph = { /* the nodes and links are here */ }
// contents of the function passed to d3.json

#1