selection.call() method in D3 can aid in code organization and flexibility by eliminating the need to use chained method calls for every operation.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../bower_components/underscore/underscore-min.js"></script> <script src="../ventor/d3.min.js"></script> <style type="text/css"> body { padding-top: 50px; padding-left: 100px; } #chartArea { width: 400px; height: 300px; background-color: #CCC; } .bar { display: inline-block; width: 20px; height: 75px; /* Gets overriden by D3-assigned height below */ margin-right: 2px; /* fill: teal; *//* SVG doesn't have background prop, use fill instead*/ z-index: 99; } .bubble, .center { display: inline-block; fill: purple; fill-opacity: 0.5; stroke: black; stroke-weight: 1px;; z-index: 15; } .center { z-index: 10; } .active { fill: magenta; fill-opacity: 0.5; stroke-width: 3px; } .axis path, .axis line { fill: none; stroke: #000; stroke-width: 1px; shape-rendering: crispEdges; } </style> </head> <body> <button onclick="update()">Update</button> <section id="chartArea"></section> <script> function planTrasition(selection, duration, color){ selection .transition() .duration(duration) .style('fill', color) .attr('cx', function(each_data, index) { return xScale(each_data.x); }) .attr('cy', function(each_data) { return yScale(each_data.y); }) .attr('r', function(each_data, i) { return each_data.r; }); } function stepTransition(selection) { selection.transition() .duration(600) .style('fill', "lightblue") .attr('cx', function(each_data, index) { return xScale(each_data.x); }) .transition() .duration(600) .attr('cy', function(each_data) { return yScale(each_data.y); }) .transition() .duration(600) .attr('r', function(each_data, i) { return each_data.r; }); } function newData(d){ d.x = Math.round(Math.random() * 100); d.y = Math.round(Math.random() * 100); d.r = Math.round(5 + Math.random() * 10); } function update(){ //Only the data which x < 50 will get update svg.selectAll('circle') .filter(function(d) { return d.x < 50; }) .each( newData) .call(stepTransition); svg.selectAll('circle') .filter(function(d) { return d.x >= 50; }) .each( newData) .call(planTrasition, 2000, "red"); } var dataset = _.map(_.range(30), function(num) { return { x: Math.round(Math.random() * 100), y: Math.round(Math.random() * 100), r: Math.round(5 + Math.random() * 10) }; }), //reandom generate 15 data from 1 to 50 margin = {top: 20, right: 20, bottom: 40, left: 40}, w = 400 - margin.left - margin.right, h = 300 - margin.top - margin.bottom; var svg = d3.select('#chartArea').append('svg') .attr('width', w + margin.left + margin.right) .attr('height', h + margin.top + margin.bottom) .append('g') //The last step is to add a G element which is a graphics container in SBG. .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); //Then offset that graphic element by our left and top margins. var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.y; //tell the max function just need to care about y prop })]) .range([h, 0]); var yAxis = d3.svg.axis() .scale(yScale) .orient('left') .ticks(10) .innerTickSize(10) .outerTickSize(10) .tickPadding(10); svg.append('g') .attr('class', 'y axis') .attr('transform', 'translate(0,0)') .call(yAxis); var xScale = d3.scale.linear() .domain([0, 100]) .range([0, w]); var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom') .ticks(10) .innerTickSize(6) .outerTickSize(12) .tickPadding(12); svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0, ' + h + ')') .call(xAxis); svg.selectAll('circle') .data(dataset) .enter() .append('circle')// svg doesn't have div, use rect instead .attr('class', "bubble") .attr('cx', function(each_data, index) { return xScale(each_data.x); }) .attr('cy', function(each_data) { return yScale(each_data.y); }) .attr('r', function(each_data, i) { return each_data.r; }) .on('mouseover', function() { d3.select(this).classed('active', true) }) .on('mouseleave', function() { d3.select(this).classed('active', false) }) .on('mousedown', function(d) { var p_cx = d.x, p_cy = d.y, p_r = d.r; d3.select(this).transition().duration(500).attr('r', d.r * 1.5); svg.append('circle') .attr('class', "center") .attr('cx', function() { return xScale(p_cx); }) .attr('cy', function() { return yScale(p_cy); }) .attr('r', function() { return p_r / 4; }) .style('fill', 'red'); }) .on('mouseup', function(d) { d3.select(this).transition().duration(250).delay(100).attr('r', d.r) }); </script> </body> </html>
