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

时间:2015-04-13 16:50:47

标签: javascript d3.js

我试图根据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/

1 个答案:

答案 0 :(得分:0)

所以我想出来了。我没有看到我使用的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}; 
    }