I’m back for another addition of d3.js for noobs. I’m a professional developer but I’m no d3.js pro, but I believe I’ve learned a few things that could be useful.<\/p>\n
\nmarginContainer.append( 'path' )\n .datum( startData )\n .attr('class', 'line')\n .attr( 'd', line )\n .transition()\n .duration( 500 )\n .ease('quad')\n .attrTween( 'd', function() {\n var interpolator = d3.interpolateArray( startData, data );\n\n return function( t ) {\n return line( interpolator( t ) );\n }\n } )\n .each('end', function() {\n drawCircles( data, marginContainer );\n });\n<\/pre>\nSo last time we got to the point where we’re calling the drawCircles()<\/code> function. When you use .each('end', function(){<\/code> the function gets called at the end of each selection. In this case we only have one selection.<\/p>\n<\/p>\n
\nfunction drawCircles( data, container ) {\n circleContainer = container.append( 'g').attr('class', 'circles');\n data.forEach( function( datum, index ) {\n drawCircle( datum, index );\n } );\n}\n<\/pre>\nThe drawCircles()<\/code> function is simple. It appends the circleContainer<\/code> and it takes the passed in data and calls the drawCircle()<\/code> function for each data point. <\/p>\n\nfunction drawCircle( datum, index ) {\n circleContainer.datum( datum )\n .append( 'circle' )\n .attr( 'class', 'circle' )\n .attr( 'r', 0 )\n .attr(\n 'cx',\n function( d ) {\n return x( d.date );\n }\n )\n .attr(\n 'cy',\n function( d ) {\n return y( d.value );\n }\n )\n .on( 'mouseenter', function( d ) {\n d3.select( this )\n .attr(\n 'class',\n 'circle active'\n )\n .attr( 'r', 7 );\n\n d.active = true;\n\n showCircleDetail( d );\n } )\n .on( 'mouseout', function( d ) {\n d3.select( this )\n .attr(\n 'class',\n 'circle'\n )\n .attr( 'r', 6 );\n\n if ( d.active ) {\n hideCircleDetails();\n\n d.active = false;\n }\n } )\n .on( 'click touch', function( d ) {\n if ( d.active ) {\n showCircleDetail( d )\n } else {\n hideCircleDetails();\n }\n } )\n .transition()\n .delay( 100 * index )\n .duration(750)\n .ease('elastic', 1.5, .75)\n .attr( 'r', 6 )\n ;\n}\n<\/pre>\nThe drawCircle()<\/code> function its pretty long but most of it is just handling the mouse events. First create a circle using the datum<\/code>. The r<\/code> attribute is the circle radius. The cx<\/code> and cy<\/code> attributes handle the x and y coordinates of the circle, date<\/code> and value<\/code> respectively. <\/p>\nNow to handle our mouse events. On mouseenter<\/code> we chance the class of the circe to include active<\/code>. We increase the radius a smidge. Finally we call the function to show the detail popover. On mouseout<\/code> we reverse the mouseenter<\/code> changes. We also handle touch events with click touch<\/code>.<\/p>\nAt the end we handle the initial animation for the circles. The .delay()<\/code> function creates the delay between each created point. We add some fun easing to make the circles look like they are plopping in. The 1.5<\/code> sets the percentage of the the max size of the elastic animation and the .75<\/code> is the min percentage. <\/p>\n\nfunction showCircleDetail( data ) {\n var details = circleContainer.append( 'g' )\n .attr( 'class', 'bubble' )\n .attr(\n 'transform',\n function() {\n var result = 'translate(';\n\n var xVal = x( data.date ) - detailWidth\/2;\n if(xVal + detailWidth > width ){\n xVal = width - detailWidth;\n }\n else if(xVal < 0){\n xVal = 0;\n }\n\n result += xVal;\n result += ', ';\n result += y( data.value ) - detailHeight - detailMargin;\n result += ')';\n\n return result;\n }\n );\n\n details.append( 'rect' )\n .attr( 'width', detailWidth )\n .attr( 'height', detailHeight )\n .attr('rx', 5)\n .attr('ry', 5);\n\n var text = details.append( 'text' )\n .attr( 'class', 'text' );\n\n var dateFormat = d3.time.format("%m\/%d\/%Y");\n\n text.append( 'tspan' )\n .attr( 'class', 'price' )\n .attr( 'x', detailWidth \/ 2 )\n .attr( 'y', detailHeight \/ 3 )\n .attr( 'text-anchor', 'middle' )\n .text( 'Price: ' + data.value );\n\n text.append( 'tspan' )\n .attr( 'class', 'date' )\n .attr( 'x', detailWidth \/ 2 )\n .attr( 'y', detailHeight \/ 4 * 3 )\n .attr( 'text-anchor', 'middle' )\n .text( 'Date: ' + dateFormat(data.date) );\n}\n<\/pre>\nFinally the showCircleDetail()<\/code> function is what creates the popover when you hover over a data point on the line. First we append a new element called details. We’re going to use css transform<\/code> translate()<\/code> to position the popover in the right place.<\/p>\n\nif(xVal + detailWidth > width ){\n xVal = width - detailWidth;\n}\nelse if(xVal < 0){\n xVal = 0;\n}\n<\/pre>\nThis piece of code may seem unclear but the reason we’re doing this is to ensure our popover is not being placed outside of the width of graph. So at most it’ll be touching the left or right edge of our graph.<\/p>\n
Then we create our actual SVG parts, the rectangle as the background\/container and the text. The text is broken up using tspan<\/code> to position them. <\/p>\nThat’s all for now. Don’t forget to check out Part 1<\/a> if you missed it. Cheers!<\/p>\n