如何根據列值對DC js氣泡圖進行着色？

Question

我對於DC js來說相當陌生，並且一直在嘗試使用自定義顏色編碼在DC js中設置氣泡圖，但迄今爲止還沒有運氣。如果我嘗試給它一個自定義着色比例，氣泡圖可以很好地與「d3.scale.category20（）」顏色比例關聯，但會拋出「_colors.range不是函數」錯誤。

我想根據「sic」變量的範圍給出不同的顏色。例如：如果值介於0和1000之間，則應該是紅色，1000-2000，它應該是藍色等等。

我試着創建一個d3序數標度並指定相應值的域和範圍，然後在color accessor函數中，我嘗試返回基於變量值的域值（在這種情況下爲d.key ），但是當我檢查瀏覽器的代碼，我得到一個「_colors.range是不是一個函數」類型錯誤

下面是完整的DC 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，這是在今年年初發布的工作。