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

库中的大多数示例都从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
}

d3.tsv（“data.tsv”，函数（错误，数据）{
var myEntitiesJson=getEntitiesJson（）；//用于
D3js

或

v3

（不确定是哪一个）

声明您的数据集 如图所示，您可以使用：

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

绑起来 更多解释请访问

data（）函数适用于选择，更多信息可在官方文档中找到：.

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

---

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

我所说的形状是指数据的组织方式。例如，

'{“foo”：1，“bar”：2}'

和

'{“name”：[“foo”，“bar”]，“value”：[1,2]}“

可用于存储相同的数据，但可以将所有内容存储在对象中，其中对象键对应于数据点的名称，使用单独的数组存储名称和值，相应的条目具有公共数组索引

但是，将json转换为数据有一个一般过程。首先，您需要解析json。这可以通过javascript标准

json

对象来完成。如果json对象已经上传到客户端，请使用

json.parse（myJson）

从json对象获取数据。

d3.json（my/json/directory，fn（）{}

可以加载和解析json，因此，如果您是从服务器上的其他位置加载json，这可能是将json导入对象的更好方法

一旦将json打包到javascript对象中，您仍然需要对其进行数据处理，这将取决于您的数据。d3所期望的是某种形式的数组：

[dataPoint1，dataPoint2，…]

。对于我上面给出的两个示例，您想要的数组如下所示：

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

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

我的数组中每个数据点有一个元素，有两个属性：

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

对于第二个示例，我希望循环遍历对象的每个属性，

名称

和

值

。我的代码可能如下所示：

var i;
var data = [];

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

vari；
var数据=[]；
对于（i=0；i

---

这两种方法都将产生我的原始JSON的数据化版本，然后我可以在d3中使用。

为什么不简单地将JSON转换为Rob所描述的tsv呢

---

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

您可以将json更改为javascript文件，将数据分配给全局值。例如：

发件人：

现在，在“graphData.js”中：

---

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

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

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”），函数（error，data）{…

因此，在我下面的d3示例中，看起来图表轴是使用x.domain（data.map（…）映射到数据集的，然后是svg.selectAll（.bar”）.data（data）…从您的示例中不清楚我如何改装jason代码片段来代替数据的使用方式。draw（myData）如何神奇地知道要为哪个轴使用哪些属性等？替换

console.log（data）；//这是您的数据
和
函数（错误，数据）
体，如
x.domain（data.map）（函数（d）{return d.letter；}）
等。在我提供的示例中，数据集（来自data.tsv）和axis之间正在进行映射。简单地将json对象替换为数据由于多种原因正在中断。它不支持.map属性，并且还使用.data（）绑定它会引发异常“无法读取未定义的属性'length'”…这就是为什么我评论说必须对我的对象执行某些操作才能使其映射到图表。这就是我不清楚的地方，特别是在上面的示例中。这个示例目前不起作用。给出的第一个示例将
dataset
定义为对象，而不是数组。d3需要格式化为数组的数据，因此
dataset
对象在绑定到所选内容之前需要转换为数组。@ckersch此答案使用的是
d3js
v2
或
v3
（不确定），有一个新的
v4
可用，因此API已经更改。您介意发布一个最新版本的有效答案吗？感谢您的回复。我已经有一段时间没有使用d3了，但计划很快再使用它，并将尝试一下此策略！作为一个阅读了所有关于将json数据映射到d3的教程的人，这是到目前为止，这是我见过的信息最丰富的一篇文章。+1来自我。嗨！当我试图从变量中读取数据而不是从“json文件”中读取数据时，我遇到了类似的问题。对于下面的示例，我成功地更改了这一点，以防数据使用简单，类似于这样的内容…for（I=0；I<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; });

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

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

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