2016-07-28 3 views
2

をスケーリングし、私は時間スケールでxScaleは(時間)バンドスケール(参考)D3取得反転値が

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

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

とYSCALEを持っD3

を使用してガントチャートを書いています

1つのリソースから別のリソースにタスク(SVG Rect)をドラッグアンドドロップする必要があります

ドラッグ私は以下のようにロジックを処理する必要があり、そのは、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] + ")"); 
    }, 

しかし、ドロップ上に移動するので、私はtransfromを使用しています:

  1. をRECTは、リソース間でも、そうする必要はありませんd3.event.y
      xAxの
    1. に基づく任意のバンドへの変換は、反転を持つ時間スケールであるが、yScaleはこれを有していない。これを行う方法?以下のようにこれを解決

答えて

9

が、他の方法はこれに答えてください場合、私は、これは標準的な方法であるかわかりません。 iはiはYSCALE値を

1

つTWEAKを与える指標を取得するeachBandによってY値(ドラッグイベント)を分割する場合

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

eachBand画素 のバンドの大きさを与えます受け入れられた答え - Math.roundではなく、Math.floorを使用します。これは、項目の中心点より下で選択すると、前者が次のレベルを下に戻すためです。したがって、修正溶液は、

var eachBand = self.yScale.step(); 
var index = Math.round((d3.event.y/eachBand)); 
var val = self.yScale.domain()[index]; 
関連する問題