CODEWITHSUNDEEP
javascriptd3.js
Rajshri Mohan K S
Rajshri Mohan K S

Reputation: 1759

D3 Bubble Chart 'bubble.nodes not a function'

I'm following Mike Bostock's tutorial here to create a bubble chart... except that I'm using my own dataset and I'm using d3 v4. I'm quite new to d3 and I understand a lot has changed in v4 from v3. I'm having trouble converting the sample code to v4.

For instance, I've converted this code in d3 v3:

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

to:

var bubble = d3.pack(dataset)
        .size([diameter, diameter])
        .padding(1.5);

Is the above correct? I'm not sure since I'm not having any errors till this point.

But I get an error in the following piece of code:

var node = svg.selectAll(".node")
        .data(
            bubble.nodes(root)
            .filter(function(d) {
                return !d.children;
            })
        )
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

with a bubble.nodes is not a function. What is the equivalent in d3 v4?

Fiddle: https://jsfiddle.net/r24e8xd7

Upvotes: 3

Views: 4619

Answers (2)

Chirag Kothari
Chirag Kothari

Reputation: 1410

Here is your updated fiddle: https://jsfiddle.net/r24e8xd7/9/.

Root node should be constructed using d3.hierarchy:

 var nodes = d3.hierarchy(dataset)
            .sum(function(d) { return d.responseCount; });

Then pack layout can be called:

var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())

Upvotes: 6

Craicerjack
Craicerjack

Reputation: 6332

Comparing the different docs, v3

# pack(root)
# pack.nodes(root)

Runs the pack layout, returning the array of nodes associated with the specified root node. The cluster layout is part of D3's family of hierarchical layouts. These layouts follow the same basic structure: the input argument to the layout is the root node of the hierarchy, and the output return value is an array representing the computed positions of all nodes. Several attributes are populated on each node:

  • parent - the parent node, or null for the root.
  • children the array of child nodes, or null for leaf nodes.
  • value - the node value, as returned by the value accessor.
  • depth - the depth of the node, starting at 0 for the root.
  • x - the computed x-coordinate of the node position.
  • y - the computed y-coordinate of the node position.
  • r - the computed node radius.

to the newer v4

# pack(root) <>

Lays out the specified root hierarchy, assigning the following properties on root and its descendants:

  • node.x - the x-coordinate of the circle’s center
  • node.y - the y-coordinate of the circle’s center
  • node.r - the radius of the circle

You must call root.sum before passing the hierarchy to the pack layout. You probably also want to call root.sort to order the hierarchy before computing the layout.

it looks like pack() is what you are looking for, but it looks like you might need a change or two before you do.

update
Quick look into different things and there are a few things going on that its not just a simple fix.

  • your data is entirely different to the example and is flat, which effects the diagram.

  • why not use v3? Most of the examples out there are in v3 and like you said you are new to d3. why make things difficult.

  • Finally start small. I would suggest trying to find a small bubble chart first and then make your way up, or substitute your data into the example code and get that working and then incrementally change it instead of trying to change multiple things at once.

Upvotes: 2

Related Questions