如何根据列值为DC js气泡图着色？

Question

我是 dc js 的新手，一直在尝试使用自定义颜色编码在 DC js 中设置气泡图，但到目前为止还没有成功。气泡图在 "d3.scale.category20()" 色标下运行良好，但如果我尝试为其提供自定义色标，则会抛出“_colors.range 不是函数”错误。

我想根据 "sic" 变量的范围给出不同的颜色。例如：如果值介于 0 和 1000 之间，则应为红色，1000-2000 应为蓝色，依此类推。

我尝试创建一个 d3 序数标度并为相应值指定域和范围，然后在颜色访问器函数中，我尝试 return 基于变量值的域值（d.key 在这种情况下），但是当我检查浏览器上的代码时，我得到一个“_colors.range 不是函数”TypeError

这是完整的 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。

如何根据列值为DC js气泡图着色？

How to color DC js bubble chart based on column value?

javascript

bubble-chart

colors

d3.js

dc.js