2

まず第一に、これは投稿で尋ねられた前の質問とは異なります。私が達成しようとしているのは、Google ツリーマップにあるような d3 のツリーマップ全体のグラデーションです。

http://bost.ocks.org/mike/treemap/を実装しようとしていますが、同じ作業をしていますが、d3 では色のグラデーションを入れようとしていました。

現在、私はこれを行っています

color = d3.scale.category20c()

と

.style("fill", function(d) { return color(d.name)})

私のsvg要素で。しかし、ツリーマップの大きなボックスをより緑に、小さなボックスをより緑に少なくするために、ヒートマップのようなグラデーションカラーを使用したいと考えています。d3/cssでそれを指定する方法はありますか?

4

1 に答える 1

6

ツリーマップの各ボックスにカラー スケールを適用する必要があるようです。これは非常に簡単です:

var colorScale = d3.scale.linear()
    .range(['lightgreen', 'darkgreen']) // or use hex values
    .domain([minValue, maxValue]);

次に、で適用します

.style("fill", function(d) { return colorScale(d.value)});

ここで難しいのは、ドメインを決定することです。データの構造によっては、ツリーをたどって収集する必要がある場合があります。Bostock の例では、次のようにデータを要素に結合した後、データの範囲を取得できます。

d3.extent(d3.selectAll('rect.child').data(), function(d) { return d.value; });
于 2013-05-30T22:10:15.460 に答える