列の値に基づいてDC jsバブルチャートを表示する方法はありますか？

Question

DCジャージーにはかなり新しく、カスタムカラーコーディングでDC jsにバブルチャートを設定しようとしていますが、今まで運がなかったのです。バブルチャートは「d3.scale.category20（）」カラースケールでうまく動作しますが、カスタムのカラースケールにしようとすると「_colors.range is not a function」エラーがスローされます。

「sic」変数の範囲に基づいて異なる色を指定したいとします。たとえば、値が0〜1000の場合、赤、1000-2000、青などでなければなりません。

d3の尺度を作成し、対応する値の範囲と範囲を指定しようとしましたが、カラーアクセサー関数で変数の値に基づいてドメイン値を返そうとしました（この場合d.key ）は、しかし、私は、ブラウザ上でコードをチェックするとき、私は

「_colors.rangeは関数ではありません」TypeError例外を取得ここでそれは素晴らしいことだ、完全な直流JSとcrossfilter jsのコード

var industryChart = dc.bubbleChart("#industry-chart"); 


// load data from a csv file 
d3.csv("df_20topics_5types.csv", function (data) { 

data.forEach(function(d) { 
d.cik=+d.cik; 
d.year = +d.year; 
d.sic = +d.sic; 
d.type_count = +d.type_count; 
d.sic2 =+d.sic2; 
d.sic3 = +d.sic3; 
d.maxtopic = d.maxtopic; 
d.maxweight = +d.maxweight; 
d.topic0 = +d.topic0; 
d.topic1 = +d.topic1; 
//d.month = +d.month; 
//console.log(d.topic0) 
}); 


var facts = crossfilter(data); 
var all = facts.groupAll(); 

var sicValueOrig = facts.dimension(function (d) { 
// console.log(d.sic); 
return d.sic; 
// add the SIC dimension 

}); 
var sicValueGroupCountOrig = sicValueOrig.group() 
.reduceSum(function(d) { return d.type_count; }); 


var colorScale = d3.scale.ordinal().domain(["000","1000","2000",""]) 
     .range(["#FF0000", "#00FF00", "#0000FF"]); 

industryChart.width(990) 
       .height(280) 
       .x(d3.scale.pow(2)) 
       //.xaxis() 
       .margins({top: 10, right: 50, bottom: 30, left: 80}) 
       .dimension(sicValueOrig) 
       .group(sicValueGroupCountOrig) 

       //.colors(d3.scale.category20()) 
       .colorAccessor(function(d){ 

        if(d.key < 1000) 
        return "000"; 
        else if (d.key > 1000 && d.key < 2000) 
        return "1000"; 
        else if (d.key > 2000 && d.key < 3000) 
        return "2000"; 

        //console.log(d.key); 
       }) 
       .colors(function(d){ 
        return colorScale(d); 
       }) 
       .keyAccessor(function (p) { 
        // console.log(p) 
        return p.key; 
       }) 
       .valueAccessor(function (p) { 
        return p.value; 
       }) 
       .radiusValueAccessor(function (p) { 
        return p.value; 
       }) 
       .r(d3.scale.linear().domain([0, 200000])) 
       .minRadiusWithLabel(5) 
       .elasticY(true) 
       .yAxisPadding(100) 
       .elasticX(true) 
       .xAxisPadding(200) 
       .maxBubbleRelativeSize(0.10) 
       .renderHorizontalGridLines(true) 
       .renderVerticalGridLines(true) 
       .renderLabel(true) 
       .renderTitle(true) 
       .title(function (p) { 
        return "SIC number: "+p.key+"\nTotal Count: "+p.value; 
       }).xAxis().tickValues([]); 
     industryChart.yAxis().tickFormat(function (s) { 
      return s + " filings"; 
     }); 


     dc.renderAll(); 

ですあなたの誰かが私が間違っていることを指摘し、解決策を提案できる場合は助けてください。ありがとうございました。

Answer 1

あなたはversion 2.0 documentation for chart.colors()を見ていますが、バージョン1.7以下を使用していると思います。以前のバージョンでは、関数はスケールではなく、関数を使用しました。

理由がない限り、スケールを呼び出す関数ではなく、スケールを渡す方が良いと思います。

ので、代わりの

  .colors(function(d){ 
       return colorScale(d); 
      }) 

は言っ

  .colors(colorScale) 

が、私はあなたのコードは今年初めにリリースされたdc.js 2.0、で動作するはずだと思うしてみてください。