NVD3 javascript：散布図の点に色を追加する

Question

x、y、z値のデータから散布図を作成しようとしています。

私のコードは、NVD3ウェブサイトの例と同じですが、 http://nvd3.org/ghpages/scatter.htmlですが、z値も計算されます。 z = x + yと言うことができます。半径の値を変更する代わりに、2色の間で補間することで色を設定したいと思います。

すべての点がグラフに表示されますが、シリーズの色のみを設定する方法はわかりません。

[{"key":"X Plus Y","values":[{"x":0,"y":0,"z":0,"color":"#ff0000"}, ...] 

が、これは動作しませんので、私は、私はJavaScriptでこれを実行する必要が推測：簡単にするために、私が最初にこのような静的な色にポイントを設定してみました。私はscatterChart.jsを見ましたが、簡単な方法は見ていませんでした。しかし、私は決してjavascriptの専門家ではないので、私は簡単に何かを逃したかもしれません。

これを行う方法に関するアドバイスはありますか？新しいモデルファイルを作成する方法を知る必要がありますか？

私はちょうど同じ問題に遭遇し、私の使用に合った回避策を発見した私はまた、ツールチップにz値を表示したいと思いますが、それは2

おかげ

Answer 1

ステップになりますケース - YMMV。

基本的に私の理解は（NVD3のソースコードから）、実際にはシリーズの色のみを設定することができるということです。したがって、私はcolor: '#rrggbb'アイテムを値のオブジェクトに追加しますこのようなデータ構造を作成するのが簡単だからです）、次に各シリーズのカラー値を設定します（私はunderscore.jsを使用しますが、純粋なJavaScriptでこれを行うことができます）。

final_groups = _.map(groups, function(values, group_id) { 
    return { key: group_id, color: values[0].color, values: values }; 
}); 

カラーをポイント単位で設定するか、離散スケールを使用するのではなく、カラー連続体を使用する必要がある場合は、D3で私にカラー値を生成させるにはmbostock's advice from this answerを使用しました：

function compute_color_on_linear_scale(data, value, colorProperty, colorRange) { 
    // get a list of all the groups (this works if the colorProperty, 
    // aka z in your case, is numeric, otherwise the sort function 
    // needs to be adjusted accordingly) 
    // In your case, you could just write item.z rather than item[colorProperty] 
    // if your function doesn't need to be generic, and in that case you can 
    // omit the colorProperty argument from the argument list altogether 
    categories = _.uniq(_.map(data, function(item) { 
     return item[colorProperty]; 
    }).sort(function(a,b){return a - b}), true); 

    // if no color range was provided, set a default one 
    if(typeof colorRange === 'undefined') { colorRange = ['red', 'green']; } 

    // this is mbostock's magic enchantment from his reply linked above 
    var color = d3.scale.ordinal() 
     .domain(categories) 
     .range(d3.range(categories.length).map(d3.scale.linear() 
     .domain([0, categories.length - 1]) 
     .range(colorRange) 
     .interpolate(d3.interpolateLab))); 

    return color(value); 
} 

これはトリックを行う必要があります。私の最終的なタッチは、このケースではそれほど意味がないと伝え聞を隠すことでした。

zの値をツールチップに表示するには、scatterChart（）のデフォルトのtooltipContent（）関数をオーバーライドする必要があります。

var chart = nv.models.scatterChart() 
    .showDistX(true) 
    .showDistY(true) 
    .tooltipContent(function(key, x, y, obj) { 
     return '<h3>' + obj.point.label + ' (' + key + ')</h3>'; 
    }); 

あなたは必要に応じてこのように多くをカスタマイズすることができます - あなただけの関数の先頭にconsole.log(arguments);を追加した場合、あなたはあなたのツールチップで使用するために提供されています正確にどのデータブラウザの開発者ツールで調べることができます。

[...] 
.tooltipContent(function(key, x, y, obj) { 
    console.log(arguments); 
    return '<h3>' + obj.point.label + ' (' + key + ')</h3>'; 
}); 

Answer 2

散布図のカラー属性を追加するには、nV.models.scatterのgetSizeのようなgetColorアクセサを追加できます。あなたは円が

//Info:May be on Mousehover?? 
points.enter().append('circle') 
    .attr('cx', function(d,i) { return x0(getX(d,i)) }) 
    .attr('cy', function(d,i) { return y0(getY(d,i)) }) 
    .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) }) 
    .attr('fill', function(d,i) { return getColor(d,i)}); 

塗装された属性を「塗りつぶし」を使用して色を追加することができます

, getSize  = function(d) { return d.size || 1} // accessor to get the point size 
, getColor  = function(d) { 
       var colors = ["red", "orange", "yellow", "green", "blue"]; 
       return colors[d.color] || 'red'} // accessor to get the point color