Databases
StackOverflow2013
Postsdbo
POZooming with D3 JS bar charts
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POZooming with D3 JS bar charts
    primarykey
    data
    text
    <p>I have made a bar chart which displays dates along the bottom (these can be daily, weekly etc) and it also has a line graph over the top of it too to show extra comparison values. Now I'm trying to add zoom functionality to the graph using the different examples from the D3 JS website but I'm not having much joy.</p> <p>These are my variables so far:</p> <pre><code>function pullIdArray(data) { var s = {}; data.forEach(function(d) { s[d.date] = true; }); var ret = []; for (var k in s) { console.log(k); ret.push(d3.time.format(dateFormatPattern)(new Date(k))) } console.log(ret); return ret; } var margin = {top: 60, right: 20, bottom: 30, left: 60}, width = $('.svg-container').width() - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .domain(pullIdArray(data)) .rangeRoundBands([0, width], .2); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(function(d) { return d3.time.format(dateFormatPattern)(new Date(d)); }); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickFormat(function(d) { return d + " kWh" }); var zoom = d3.behavior.zoom() .x(x) .y(y) .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis); } function reset() { d3.transition().duration(750).tween("zoom", function() { var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]), iy = d3.interpolate(y.domain(), [-height / 2, height / 2]); return function(t) { zoom.x(x.domain(ix(t))).y(y.domain(iy(t))); zoomed(); }; }); } var svg = d3.select(".svg-container svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.call(tip); svg.call(zoom); </code></pre> <p>The zoom function doesn't seem to like that I'm using rangeRoundBands to show my bar chart and when I try to scroll the mousewheel over the chart, I get lots of 'undefined is not a function' messages.</p> <p>Can someone tell me what I'm doing wrong and how to fix it?</p> <p>Thanks for any help.</p> <p>Edit: Updated code to add in new function pullIdArray.</p> <p>console.log(ret); shows the following:</p> <pre><code>[ "Aug 22", "Aug 23", "Aug 24", "Aug 25", "Aug 26", "Aug 27", "Aug 28", "Aug 29", "Aug 30", "Aug 31", "Sep 01", "Sep 02", "Sep 03", "Sep 04", "Sep 05", "Sep 06", "Sep 07", "Sep 08", "Sep 09", "Sep 10", "Sep 11", "Sep 12", "Sep 13", "Sep 14", "Sep 15", "Sep 16", "Sep 17", "Sep 18", "Sep 19", "Sep 20", "Sep 21", "Sep 22", "Sep 23", "Sep 24", "Sep 25", "Sep 26", "Sep 27", "Sep 28", "Sep 29", "Sep 30", "Oct 01", "Oct 02", "Oct 03", "Oct 04", "Oct 05", "Oct 06", "Oct 07", "Oct 08", "Oct 09", "Oct 10", "Oct 11", "Oct 12", "Oct 13", "Oct 14", "Oct 15", "Oct 16", "Oct 17", "Oct 18", "Oct 19", "Oct 20", "Oct 21", "Oct 22", "Oct 23", "Oct 24", "Oct 25", "Oct 26", "Oct 27", "Oct 28", "Oct 29", "Oct 30", "Oct 31", "Nov 01", "Nov 02", "Nov 03", "Nov 04", "Nov 05", "Nov 06", "Nov 07", "Nov 08", "Nov 09", "Nov 10", "Nov 11", "Nov 12", "Nov 13", "Nov 14", "Nov 15", "Nov 16", "Nov 17", "Nov 18", "Nov 19", "Nov 20", "Nov 21", "Nov 22", "Nov 23", "Nov 24", "Nov 25", "Nov 26", "Nov 27", "Nov 28", "Nov 29" ] </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVividD
    1. USuser1138966
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. CO[This question](http://stackoverflow.com/questions/10159592/is-it-possible-to-use-rangeband-on-an-ordinal-scale-with-a-dynamic-domain) and/or [this question](http://stackoverflow.com/questions/13342149/pan-zoom-ordinal-scale) may help.
      singulars
      1. POZooming with D3 JS bar charts
      1. USLars Kotthoff
    2. COI've tried using those questions to sort out my question but I'm a bit confused as to how everything really works so I'm not sure if I'm doing it right. I've edited my answer above to show how my code is at the minute, but I still get undefined function messages when trying to scroll
      singulars
      1. POZooming with D3 JS bar charts
      1. USuser1138966
    3. COYou probably want to use a time scale instead of an ordinal scale.
      singulars
      1. POZooming with D3 JS bar charts
      1. USLars Kotthoff
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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