Question

我对dc js相当新，并且一直在尝试使用自定义颜色编码在DC js中设置气泡图，但到目前为止还没有运气。气泡图与“d3.scale.category20（）”色标一起正常工作，但如果我尝试给它一个自定义着色比例，则抛出“_colors.range不是函数”错误。

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

我尝试创建一个d3序数标度并指定相应值的域和范围，然后在颜色访问器函数中，我尝试根据变量的值返回域值（在本例中为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气泡图着色？

1 个答案: