javascript - Retain ability to pan on y-axis, without zooming d3.js v4 -
i new d3.js have been attempting build gantt chart d3.js v4.
i have managed add zoom functionality graph want act differently on y-axis. currently, can pan , zoom on y-axis, want pan. because zoom causing problems having elements spread out on y-axis graph. there simple fix problem?
here scales:
//scale xaxis var xscale = d3.scaletime() .domain([mindate, maxdate]) .range([0, graphwidth]) //scale yaxis var yscale = d3.scalelinear() .domain([1, 10]) .range([50, 550])
here function runs during zoom event.
function zoom() { // re-scale x axis during zoom xaxis.transition() .duration(0) .call(d3.axistop(xscale).scale(d3.event.transform.rescalex(xscale))); // re-draw rectangles using new x-axis scale var new_xscale = d3.event.transform.rescalex(xscale); var new_yscale = d3.event.transform.rescaley(yscale); rect .attr("x", function(d) { return new_xscale(d.startdate) }) .attr("y", function(d) { return new_yscale(d.id) - 35}) .attr("width", function(d) { return new_xscale(d.enddate) - new_xscale(d.startdate) }) taskinfo .attr("y", function(d) { return new_yscale(d.id) }) }
any thoughts?
Comments
Post a Comment