StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I would change the implementation to be <em>more</em> reusable:</p> <pre class="lang-js prettyprint-override"><code>function chartBubble() { var width = 800, height = 800; function chart(selection) { selection.each(function (d, i) { var chartElem = d3.select(this); var svg = chartElem.selectAll('svg').data([d]); var svgEnter = svg.enter().append('svg'); // Now append the elements which need to be inserted // only once to svgEnter. // e.g. 'g' which contains axis, title, etc. // 'Update' the rest of the graph here. // e.g. set the width/height attributes which change: svg .attr('width', width) .attr('height', height); }); } chart.width = function(value) { if (!arguments.length) return width; width = value; return chart; }; return chart; } </code></pre> <p>Then you would create the chart in much the same way:</p> <pre><code>// Bubble is created separately and is initialized var bubble = chartBubble().width(800); d3.csv("data.csv", function (data) { d3.select("#chart") .datum(data) .call(bubble); }); </code></pre> <p>Then when it comes to <em>updating</em> the chart either by updating the <code>data</code> or by changing other attributes, you have a uniform way of doing it, very close to your implementation:</p> <pre class="lang-js prettyprint-override"><code>$("#button").click(function(){ // The advantage of defining bubble is that we can now change only // width while preserving other attributes. bubble.width(500); d3.select("#chart") //.datum(newData) .call(bubble); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload