如何根据列值对DC js气泡图进行着色？

我对于DC js来说相当陌生，并且一直在尝试使用自定义颜色编码在DC js中设置气泡图，但迄今为止还没有运气。如果我尝试给它一个自定义着色比例，气泡图可以很好地与“d3.scale.category20（）”颜色比例关联，但会抛出“_colors.range不是函数”错误。如何根据列值对DC js气泡图进行着色？

我想根据“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();

这将是一个伟大的如果你们中的任何人都能指出我做错了什么，并提出解决方案，那么请帮助。谢谢。

来源

2017-06-22 Yash Nigam

我认为你正在寻找version 2.0 documentation for chart.colors()，但使用1.7或更低版本。在早期版本中，该功能采用了一个缩放比例，而不是一个功能。

除非你有一个很好的理由，否则我认为这是更好的形式来通过这里的规模，而不是一个调用规模的函数。

所以不是

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

尝试

  .colors(colorScale)

这么说，我觉得你的代码应与dc.js 2.0，这是在今年年初发布的工作。

来源

2017-06-22 14:33:33 Gordon

我尝试将dc.js版本更改为2.1.6，并按照建议通过了比例尺而不是函数。当气泡图现在显示基于colorAccessor逻辑的颜色时，它终于起作用。非常感谢您指出这些！ –

太棒了，很高兴我能帮到你！ – Gordon

如何根据列值对DC js气泡图进行着色？

回答

相关问题