javascript - D3 Bubble Chart 'bubble.nodes not a function' -

i'm following mike bostock's tutorial here create bubble chart... except i'm using own dataset , i'm using d3 v4. i'm quite new d3 , understand lot has changed in v4 v3. i'm having trouble converting sample code v4.

for instance, i've converted 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 above correct? i'm not sure since i'm not having errors till point.

but error in 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 bubble.nodes not function. equivalent in d3 v4?

fiddle: https://jsfiddle.net/r24e8xd7

here updated fiddle: https://jsfiddle.net/r24e8xd7/9/.

root node should constructed using d3.hierarchy:

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

then pack layout can called:

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