从 D3 气泡图的 json 文件中获取数据答案

【问题标题】：Getting data from json file for D3 bubble chart从 D3 气泡图的 json 文件中获取数据
【发布时间】：2015-04-13 16:50:47
【问题描述】：

我正在尝试根据 d3 wiki 中的示例创建气泡图。 http://bl.ocks.org/mbostock/4063269

不幸的是，我仍然处于 javascript 的初学者水平，并且不了解某些代码。

json的布局在这里：http://pastebin.com/QAMBfLjr

我想创建圆圈并以值命名并使其大小基于计数。

看来我需要修改的代码是这样的：

function recurse(name, node) {
  if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
  else classes.push({packageName: name, className: node.name, value: node.size});
}

所以我用孩子的实例代替我想要在 json 中迭代的路径。然后我更改我想要的键的名称。

facet_counts.facet_pivot["category_level0,category_level1,category_level2,category_level3"]

所以这段代码看起来像：

function recurse(name, node) {
  if (node.facet_counts.facet_pivot["category_level0,category_level1,category_level2,category_level3"]) node.facet_counts.facet_pivot["category_level0,category_level1,category_level2,category_level3"].forEach(function(child) { recurse(node.value, child); });
  else classes.push({packageName: value, className: node.value, value: node.count});
}

但这不起作用。我在页面上看不到任何内容，控制台输出显示：

Uncaught TypeError: Cannot read property 'facet_pivot' of undefined

有人可以帮我指出正确的方向吗？

谢谢！

添加 jsfiddle：http://jsfiddle.net/jwhite/4o6tbe0w/

【问题讨论】：

你是否在这一行中传入了正确的 json 文件？
d3.json("flare.json", function(error, root)
添加小提琴也会有帮助...jsfiddle.net
示例代码仅使用recurse 函数来展平flare.json 数据（这是一个嵌套结构）。你的结构看起来已经很平坦了，你只需使用json["facet_counts"]["facet_pivot"]["category_level0,category_level1,category_level2,category_level3"]
我添加了一个小提琴。 @brettwgreen 我将我的 json 文件命名为相同的东西，所以我不需要在那里更改名称。马克 - 我明白你在说什么。我认为我需要递归才能进入多个级别。

标签： javascript d3.js

【解决方案1】：

所以我想通了。我没有看到我使用的 json 文件的格式与示例中提供的格式不同。

在开发控制台中玩了一会儿后，我发现我必须将 processData 函数编辑为以下内容：

        function processData(data) { 
          var obj = data.facet_counts.facet_pivot["category_level0,category_level1,category_level2,category_level3"];
          var newDataSet = [];

          for(var prop in obj) {
            newDataSet.push({name: obj[prop].value, className: obj[prop].value.toLowerCase(), size: obj[prop].count}); 
        }
        return {children: newDataSet}; 
    }

【讨论】：