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:

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/r24e8xd7

• javascript
• d3.js

• Could you provide a fiddle? – Mehraban Commented Sep 7, 2016 at 11:44
• @SaeedAdelMehraban Edited to add fiddle. – Rajshri Mohan K S Commented Sep 7, 2016 at 11:53
• you need to add d3 to your fiddle and change the code slightly, remove the call in the html and move it to the js, and fix the other errors that are in the fiddle – Craicerjack Commented Sep 7, 2016 at 11:58
• @Craicerjack I've made the changes in the fiddle now. – Rajshri Mohan K S Commented Sep 7, 2016 at 12:09

2 Answers 2

Here is your updated fiddle: https://jsfiddle/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())

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 puted 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 puted x-coordinate of the node position.
• y - the puted y-coordinate of the node position.
• r - the puted 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 puting 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.