i am writing a Gantt Chart using d3
i have xScale with Time Scale(Time)
this.xScale = d3.scaleTime()
.domain([this.startDate,this.endDate])
.range([0,this.getWidth()]);
and yScale as Band Scale (Resources)
this.yScale = d3.scaleBand()
.domain(resources.map(function(res){
return res.res_num;
}))
.rangeRound([0,this.getHeight()])
.paddingInner(.3)
Problem is i need to drag and drop the task( SVG Rect) from one resource to another resources
When i drag i am using the transfrom so its moving on the 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 i have to handle the logic as below:
Solved this as below but i don't know this is standard way, if any other way please answer to this.
var eachBand = self.yScale.step();
var index = Math.round((d3.event.y / eachBand));
var val = self.yScale.domain()[index];
eachBand gives the size of the band in pixels if i divide the y value (drag event) by the eachBand i will get the index which gives the yScale value