D3得到轉化價值尺度

寫甘特圖我有xScale等隨時間尺度（時間）

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

和yScale爲帶尺度（資源）

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

問題是我需要將任務（SVG Rect）從一個資源拖放到另一個資源

當我拖我使用transfrom所以其對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] + ")"); 
    },

但在下降移動我必須處理如下的邏輯：

的資源之間的矩形不應該在，所以需要基於d3.event.y 變換到任何帶
在X軸的時間尺度，其具有翻轉但yScale沒有此。這個怎麼做？

來源

2016-07-28 chiranjeevigk

如下解決了這個，但我不知道這是標準的方式，如果任何其他方式請你回答這一點。

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

eachBand給出了頻帶的以像素爲單位大小，如果我由eachBand除以y值（拖拽事件）我會得到其給出yScale值

來源

2016-08-03 14:47:47 chiranjeevigk

一個TWEAK到索引接受的答案 - 你可能要使用Math.floor而非Math.round因爲前者會返回一個新的水平較低，如果你碰巧選擇項目的中心點以下。改性溶液是這樣的：

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

來源

2017-06-14 15:22:15

D3得到轉化價值尺度

回答

相關問題