javascript - d3 getting invert value of Band Scales -
i writing gantt chart using d3
i have xscale time scale(time)
this.xscale = d3.scaletime() .domain([this.startdate,this.enddate]) .range([0,this.getwidth()]);
and yscale band scale (resources)
this.yscale = d3.scaleband() .domain(resources.map(function(res){ return res.res_num; })) .rangeround([0,this.getheight()]) .paddinginner(.3)
problem need drag , drop task( svg rect) 1 resource resources
when drag using transfrom moving on svg
_ondrag : function(d) { var x = d3.event.dx+d3.event.x; var y = d3.event.dy+d3.event.y; d3.select(this).raise().attr("transform","translate(" + [x,y] + ")"); },
but on drop have handle logic below:
- the rect should not in between resources, need transform band based on d3.event.y
- in xaxis time scale has invert yscale not have this. how this?
solved below don't know standard way, if other way please answer this.
var eachband = self.yscale.step(); var index = math.round((d3.event.y / eachband)); var val = self.yscale.domain()[index];
eachband gives size of band in pixels if divide y value (drag event) eachband index gives yscale value
Comments
Post a Comment