D3 Bubble Chart

Question

I'm new to D3, and it’s really hard for me to work with the Bubble Chart if I don’t use the exact example data:

• https://github.com/mbostock/d3/blob/master/examples/bubble/bubble.js
• https://github.com/mbostock/d3/blob/master/examples/data/flare.json

In particular, I am having problems with

.attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); 

I cannot run this piece of code to work with other examples.

Here is a subset of the JSON data I'm working with:

 { "name": 301, "children": [ { "resourceid": "11", "creator_uid": "301", "owner": "Tom", "name": "Omega", "created_time": "2012-03-07 20:07:11", "items": "4" }, { "resourceid": "188", "creator_uid": "301", "owner": "Tom", "name": "Nexus", "created_time": "2012-03-31 00:04:56", "items": "14" } ] } 

I can set the radius to "elements", but I expect

 .data(bubble.nodes(json) 

to distribute nodes, but I get errors that dx is NULL. Given the sample data for the bubble example, I'm not sure how the dx and dy bubble example is created

Could you explain this in detail?

Answer 1

When using the Bubble Chart, data should be flattened. In the example you linked, there is a call to a function called "classes", which for each node returns the class as a new object with the value property containing the size. (The code above indicates that you did not specify this call).

Subsequently, the call to the bubble.nodes function uses the value property for each object created by the function of the classes (which were placed in one array) to calculate x and y (which, in turn, is used within the conversion function). For more information on package features, see d3 docs . The same nodes function also calculates the radius (like r ), which is used later.

This is a nodes call that defines the complete layout of a bubble chart. The rest of the code in the sample consists in building the necessary SVG elements, such as a circle and text, in positions determined by the results calculated by the nodes function.

Thus, you cannot pass json data directly to bubble.nodes if it does not meet specific requirements (for example, it has a value property).

Here is a working example on jsfiddle.net.