6

だから私はd3.jsサンキーダイアグラムで遊んでいます。

ここに画像の説明を入力してください

この例（上の写真）では、色は次を使用して定義されています

var color = d3.scale.category20();

各ノードには長方形があり、その長方形はスタイルを変更することで塗りつぶされます。

.style("fill", function(d) {
    return d.color = color(d.name.replace(/ .*/, ""));
})

カスタムカラーの使用に関する提案を探しています。たとえば6色だけを使用したいが、.jsonファイルの値に基づいてノードの長方形の色を選択する場合。

たとえば、NFLのチームのスネークチャートを表示したいとします。それぞれの色は、チームがどの部門でプレーするかを表しています。したがって、チームが別の部門に移動すると、色が変わります。そして、ノードは季節ごとに作成されます。それらの線に沿った何か。

だから、実行することは可能ですか？ 

node.append("rect")
    .attr("height", function(d) { return d.dy; })
    .attr("width", sankey.nodeWidth())
    .style("fill", function(d) {
        return d.color = color(d.name.replace(/ .*/, ""));
    })
    .style("stroke", function(d) {
        return d3.rgb(d.color).darker(2);
    })
   .append("title")
    .text(function(d) { return d.name + "\n" + format(d.value); });

jsonファイルの値に基づく色で？私はifステートメントだけを考えていますが、もっと簡単な方法はありますか？jsonに16進カラーコードを含めることはできますか？

4

3 に答える 3

26

または、ドキュメントに記載されているように、d3 序数スケールを使用して明示的に色を除算にマッピングすることもできます。下部の Colorbrewer を参照してください。

var color = d3.scale.ordinal()
    .domain(["foo", "bar", "baz"])
    .range(["#fff","#000","#333"]);

その後

.attr("fill", function(d) { return color(d.division); });
于 2012-10-22T14:05:53.260 に答える
6

この場合、JSON に色を含めたいと思われます。名前 ("white") や 16 進数 ("#fff") など、ブラウザが認識する任意の方法で含めることができます。サポートされている色指定の完全なリストについては、 SVG 仕様を参照してください。

于 2012-10-22T09:27:55.227 に答える
1

次のように置き換えますconst color = d3.scaleOrdinal(d3.schemeCategory20);。

const color = d3.scaleOrdinal() 
.domain(["Crude oil","Natural gas",...])
.range(["#FD3E35","#FFCB06",...]);

そして、一緒にいてください：

.style('fill', (d,i) => {
  d.color = color(d.name.replace(/ .*/, ''));
  return d.color;})
于 2017-07-23T14:44:22.107 に答える