d3 immer Invertzucker Wert von Band Scales

Question

Ich schreibe ein Gantt-Diagramm d3

ich habe xScale mit Time Scale (Time)

this.xScale = d3.scaleTime() 
      .domain([this.startDate,this.endDate]) 
      .range([0,this.getWidth()]); 

und yScale als Band Scale (Ressourcen)

this.yScale = d3.scaleBand() 
     .domain(resources.map(function(res){ 
      return res.res_num; 
     })) 
     .rangeRound([0,this.getHeight()]) 
     .paddingInner(.3) 

Problem ist ich brauche die Aufgabe (SVG Rect) von einer Ressource auf einen anderen Ressourcen

Wenn ich per Drag & Drop drag ich die transfrom bin mit so seine

_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] + ")"); 
    }, 

Aber Tropfen auf dem SVG bewegen, ich habe die Logik zu handhaben, wie unten:

1. die rect nicht zwischen den Ressourcen sein sollte, so müssen transformieren in ein beliebiges Band basierend auf d3.event.y
   2. in xAxis die Zeitskala, die die Invertierung hat aber die yScale nicht haben. Wie macht man das?

Answer 1

dies wie unten gelöst, aber ich weiß nicht, dies ist Standardmethode, wenn eine andere Art und Weise zu dieser Antwort bitte.

var eachBand = self.yScale.step(); 
var index = Math.round((d3.event.y/eachBand)); 
var val = self.yScale.domain()[index]; 

eachBand gibt die Größe des Bandes in Pixeln wenn i den y-Wert (drag Ereignis) durch die eachBand dividieren wird der Index i erhalten, die dem yScale Wert

Answer 2

One zwicken den gibt akzeptierte Antwort - Sie können Math.floor anstelle von Math.round verwenden, da die vorherige die nächste Ebene niedriger zurückgibt, wenn Sie unterhalb des Mittelpunkts des Elements auswählen. Die modifizierte Lösung ist somit:

var eachBand = self.yScale.step(); 
var index = Math.round((d3.event.y/eachBand)); 
var val = self.yScale.domain()[index];