javascript - D3 transitions with multiple graphs -
i'm trying add drop down menu selects measure graph. have 8 graphs, graphing same measure different ethnicities. below code, thoughts on i'm doing wrong? right error exit() not function.
ok i've made progress following, it's still little wonky. graphs changing going off charts - yaxis rescaling max of of graphs, not local one.:
function updategraphs(newdata) { d3.selectall("svg").each(function(d, i){ eachrace = d.values; svg = d3.select(this); ymax = d3.max(eachrace, function(d) { return d[newdata]; }); yscale = d3.scale.linear().domain([0, ymax*1.25]).range([height/8, 0]).nice(); yaxis = d3.svg.axis().scale(yscale).orient("left").ticks(5); line = d3.svg.line() .x(function (d) { return x(d.date); }) .y(function (d) { return yscale(d[newdata]); }) d3.transition().duration(1000).selectall(".line") .attr("id", function(d) { return d.key ;}) .attr('class', 'line') .attr('opacity', .8) .attr('d', function(d) { return line(d.values); }) d3.selectall(".y.axis") .call(yaxis); }); } var svgcontainer = d3.select("body").selectall("svg") .data(data2) svgcontainer.enter() .append("svg") .attr("width", 150) .attr("height", 400) .attr("transform", "translate(" + margin.left + "," + margin.top+ ")"); d3.selectall("svg").each(function(d, i){ var eachrace = d.values; var svg = d3.select(this); var ymax = d3.max(eachrace, function(d) { return d.app; }); var yscale = d3.scale.linear().domain([0, ymax*1.25]).range([height/8, 0]).nice(); var yaxis = d3.svg.axis().scale(yscale).orient("left").ticks(5); var line = d3.svg.line() .x(function (d) { return x(d.date); }) .y(function (d) { return yscale(d.app); }) svg.append("path") .attr("id", function(d) { return d.key ;}) .attr('class', 'line') .attr('opacity', .8) .attr('d', function(d) { return line(d.values); }) svg.append("g") .attr("class", "y axis") .call(yaxis); });
thanks jsbob working me. i've got working with:
function updategraphs(newdata) {
d3.selectall("svg").each(function(d, i){ eachrace = d.values; svg = d3.select(this); ymax = d3.max(eachrace, function(d) { return d[newdata]; }); yscale = d3.scale.linear().domain([0, ymax*1.25]).range([height/8, 0]).nice(); yaxis = d3.svg.axis().scale(yscale).orient("left").ticks(5); console.log(ymax); line = d3.svg.line() .x(function (d) { return x(d.date); }) .y(function (d) { return yscale(d[newdata]); }) svg.transition().duration(1000).select(".line") .attr("id", function(d) { return d.key ;}) .attr('class', 'line') .attr('opacity', .8) .attr('d', function(d) { return line(d.values); }); svg.transition().duration(1000).select(".y.axis") .call(yaxis); }); }
Comments
Post a Comment