Binding data to D3 bubble nodes
Question
I am missing a step or two to get my data bound to the nodes I am creating for a d3 bubble chart. I can see the the nodes have been created in my svg and some of the data has been bound to the nodes (eg the title)
<body>
<svg class="bubble" width="960" height="960">
<g class="node" transform="translate(undefined,undefined)">
<title>mip: 24</title>
<circle style="fill: rgb(49, 130, 189);">
</g>
<g class="node" transform="translate(undefined,undefined)">
<title>theft: 558</title>
<circle style="fill: rgb(107, 174, 214);">
</g>
<g class="node" transform="translate(undefined,undefined)">
<g class="node" transform="translate(undefined,undefined)">
<g class="node" transform="translate(undefined,undefined)">
<g class="node" transform="translate(undefined,undefined)">
</svg>
</body>
I am missing something at the point where the actual values from my data are bound to the nodes, defining the circles and their dimensions.
I feel like I am close but don't quite understand how data is bound in D3.
Here is a fiddle showing what I have so far
1 answers
solution1
0 2013-11-05 00:50:34
You're already most of the way there. In your example, the functions supplied to the D3 methods all take an argument: d . d (or whatever you choose to call it) will be the data object that D3 is rendering an SVG for. this will be a reference to the SVG element itself, to which that data is bound.
Here's a revised fiddle , where the radius of your circles is bound to d.totalCrimes, and they render appropriately, I think.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.