Last active
August 29, 2015 14:07
-
-
Save fryford/e1c8199c70ee85c0cf50 to your computer and use it in GitHub Desktop.
Enter, update, exit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Enter, Update, Exit</title> | |
| <style> | |
| .axis path | |
| { | |
| fill: none; | |
| } | |
| .axis line | |
| { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 0.1% | |
| } | |
| .tick text { | |
| font-family:sans-serif,Helvetica,Arial; | |
| font-size:20px; | |
| fill:#666; | |
| } | |
| #mainChart | |
| { | |
| width:100%; | |
| height:400px; | |
| } | |
| #chart { | |
| height:600px; | |
| } | |
| .chartBars { | |
| fill: #008cba; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div> | |
| <a href='javascript:makeChart(array1)'>array1</a> | |
| <a href='javascript:makeChart(array2)'>array2</a> | |
| <a href='javascript:makeChart(array3)'>array3</a> | |
| <a href='javascript:makeChart(array4)'>array4</a> | |
| <a href='javascript:makeChart(array5)'>array5</a> | |
| <a href='javascript:makeChart(array6)'>array6</a> | |
| <a href='javascript:makeChart(array7)'>array7</a> | |
| </div> | |
| <div id="chart"> | |
| </div> | |
| </div><!--End container --> | |
| <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| $('a').click(function() { | |
| me = $(this).parent().context.text; | |
| makeChart(eval(me)); | |
| }); | |
| dvc = []; | |
| dvc.chartWidth = 700; | |
| dvc.chartHeight = 400; | |
| dvc.gapRatio = 0; | |
| dvc.yPadding = 30; | |
| dvc.xPadding = 70; | |
| array1 = [4,5,12,25,35]; | |
| array2 = [4,5,12,25,65]; | |
| array3 = [1,2,3]; | |
| array4 = [1004,2005,112,3025,435,13,1140,1450,3040,360,500]; | |
| array5 = [4,5,12,25,35]; | |
| array6 = [4,50,12,25,35]; | |
| array7 = [35]; | |
| makeChart(array1); | |
| function makeChart(array) | |
| { | |
| //Find out about the data | |
| //length of the array | |
| dvc.myInputDivisor = array.length; | |
| //Find min/max | |
| dvc.minValue = d3.min(array); | |
| dvc.maxValue = d3.max(array); | |
| //set up the scale objects as per normal | |
| dvc.yScale=d3.scale.linear() | |
| .domain([Math.min(0,dvc.minValue),dvc.maxValue]) | |
| .range([dvc.chartHeight,0]) | |
| .nice(); | |
| dvc.xScale = d3.scale.ordinal() | |
| .domain(array) | |
| .rangeRoundBands([0, dvc.chartWidth], dvc.gapRatio); | |
| //work out the width of the bars based on the nummber of records | |
| dvc.cellWidth=(1-dvc.gapRatio)*dvc.chartWidth/dvc.myInputDivisor; | |
| //Set up the chart object the data([array]) is part of a trick that means that it's only set up the once | |
| mainChart = d3.select("#chart").selectAll('svg').data([array]); | |
| //Add the main SVG - only once on enter | |
| mainChartEnter = mainChart.enter() | |
| .append('svg') | |
| .attr('id','mainChart') | |
| .attr("viewBox", "0 0 770 540") | |
| .attr("preserveAspectRatio","xMinYMin meet"); | |
| //Set up the axis - this is done on each call of the function | |
| dvc.yAxisChar=d3.svg.axis() | |
| .scale(dvc.yScale) | |
| .orient("left") | |
| .tickSize(-(dvc.chartWidth)) | |
| .ticks(8); | |
| //Append the axis - only once (mainChartEnter) | |
| mainChartEnter.append("g") | |
| .attr("class","axis") | |
| .attr("transform","translate("+ dvc.xPadding + ", " + dvc.yPadding + ")") | |
| .call(dvc.yAxisChar); | |
| //removes the stroke on the y-axis vertical - only once | |
| mainChartEnter.selectAll(".domain").style("stroke","none"); | |
| //add a group element for the bar - only once | |
| mainChartEnter.append("g") | |
| .attr("id","grpBars") | |
| .attr("transform", "translate(" + dvc.xPadding + "," + dvc.yPadding + ")"); | |
| // Every time the function is called | |
| mainChart.select('.axis') | |
| .transition() | |
| .duration(500) | |
| .call(dvc.yAxisChar); | |
| //Same trick as before | |
| //Select the group element which contains the bars and then all the chartBars within | |
| bar = mainChart.select("#grpBars").selectAll(".chartBars") | |
| .data(array); | |
| //If the element is a new selection then append a rectangle - ENTER - Do the things you only want to do once. | |
| bar.enter() | |
| .append("rect") | |
| .attr("class", "chartBars") | |
| .attr("id",function(d,i) { | |
| console.log("I'm entering bar number" + (i+1)); | |
| return "bar" + i; | |
| }); | |
| //If it's an existing selection just change these attributes - UPDATE - Do the things here you want to do apply to every element | |
| bar.attr("width", dvc.cellWidth) | |
| .attr("y", function(d) { | |
| return dvc.yScale(Math.max(0, d)); | |
| }) | |
| .attr("transform", function(d, i) { | |
| console.log("I'm updating bar number" + (i+1)); | |
| return "translate(" + dvc.cellWidth* i +"," + 0 + ")"; | |
| }) | |
| .attr("height", function(d) { | |
| return Math.abs(dvc.yScale(d) - dvc.yScale(0)); | |
| }); | |
| //If it's a selection that is no longer needed (ie there isn't a data point in the array for an existing bar) then remove it - REMOVE | |
| bar.exit().remove(); | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment