1

D3.js で行われたヒートマップのこのjsFiddleを確認してください。

デフォルトでは、y 軸は上から下になります。この会話 で説明されているように、以前は折れ線グラフの y 軸を反転する必要がありました。

ただし、ここで必要な反転を行う方法がよくわかりません。何か案は？

コードの関連部分 (反転を適用する必要がある部分) は次のとおりです。

var xGrid = d3.scale.linear()
  .range([0, w - 2])
  .domain([0, data.influencer_range.length]);

var yGrid = d3.scale.linear()
  .range([0, h - 2])
  .domain([0, data.omm_range.length]);

var xOrdinal = d3.scale.ordinal()
  .domain(data.influencer_range)
  .rangeBands([0, data.influencer_range.length]);

var yOrdinal = d3.scale.ordinal()
  .domain(data.omm_range).
  rangeBands([0, data.omm_range.length]);

var x = function(point) {
  return point * xGrid(1);
};

var y = function(point) {
  return point * yGrid(1);
}
4

1 に答える 1

1

まず、Googleスレッドの指示に従って、2つのy範囲の値を交換します。.range([h - 2, 0])

同様に、yOrdinalを逆にする必要があります。.rangeBands([data.omm_range.length, 0])

最後に、反転すると行の高さの計算が中断されるため（yGrid(1)ハードコードのようなものですが、まあまあ）、それも調整する必要があります。return point * yGrid(2)

そして、あなたはそれを持っています：http: //jsfiddle.net/qrBBS/2/

于 2012-11-29T19:42:44.530 に答える