I'm trying to create a bubble chart based on the example from the d3 wiki. http://bl.ocks.org/mbostock/4063269
Unfortunately I'm still at the beginner level of javascript and don't understand some of the code.
The layout of json is here: http://pastebin.com/QAMBfLjr
I want to create circles and name them after the value and have their size be based on count.
It seems the piece of code I need to modify is this:
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});
}
So I'm substituting instances of children for the path to what I want to iterate over in the json. Then I change the name of the keys I want.
facet_counts.facet_pivot["category_level0,category_level1,category_level2,category_level3"]
So that piece of code looks like:
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});
}
But that's not working. I don't see anything on the page and the console output says:
Uncaught TypeError: Cannot read property 'facet_pivot' of undefined
Can someone help point me in the right direction?
Thanks!
Adding jsfiddle: http://jsfiddle.net/jwhite/4o6tbe0w/
So I figured this out. I didn't see that the json file I'm using is in a different format from the one that is supplied with the example.
After playing around a bit in the dev console I figured out I had to edit the processData function to the following:
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};
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.