javascript - d3.js forceSimulation() with object entries -
have problem bubble chart.
used forcesimulation() array of objects , worked. changed data source , doesn't, if console displays no errors.
data object called "lightweight", following structure:
use append circles so:
// draw circles var node = bubblesvg.selectall("circle") .data(d3.entries(lightweight)) .enter() .append("circle") .attr('r', function(d) { return scaleradius(d.value.length)}) .attr("fill", function(d) { return colorcircles(d.key)}) .attr('transform', 'translate(' + [w/2, 150] + ')');
then create simulation:
// simulate physics var simulation = d3.forcesimulation() .nodes(lightweight) .force("charge", d3.forcecollide(function(d) { return d.r + 10; })) .force("x", d3.forcex()) .force("y", d3.forcey()) .on("tick", ticked); // updates position of each circle (from function dom) // call check position of each circle function ticked(e) { node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); }
but circles remain on top of each other , not become bubble chart did before.
apologise if dumb question, new d3 , understood little of how forcesimulation() works.
example, if call multiple times different data, resulting simulation affect specified data?
in advance!
Comments
Post a Comment