Как раскрасить пузырьковую диаграмму DC js на основе значения столбца?

Я новичок в dc js и пытался настроить пузырьковую диаграмму в DC js с пользовательским цветовым кодированием, но пока мне не повезло. Пузырьковая диаграмма отлично работает с цветовой шкалой «d3.scale.category20()», но выдает ошибку «_colors.range is not a function», если я пытаюсь задать для нее пользовательскую цветовую шкалу.

Я хочу дать другой цвет в зависимости от диапазона переменной "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();

Было бы здорово, если бы кто-нибудь из вас мог указать, что я делаю неправильно, и предложить решение. Спасибо.


person Yash Nigam    schedule 22.06.2017    source источник


Ответы (1)


Я думаю, вы смотрите на версию 2.0. документацию для chart.colors(), но с использованием версии 1.7 или ниже. В более ранних версиях функция принимала масштаб, а не функцию.

Если у вас нет веской причины, я думаю, что лучше передать шкалу здесь, а не функцию, вызывающую шкалу.

Итак, вместо

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

пытаться

            .colors(colorScale)

Тем не менее, я думаю, ваш код должен работать с dc.js 2.0, который был выпущен в начале этого года.

person Gordon    schedule 22.06.2017
comment
Я попытался изменить версию dc.js на 2.1.6 и передал шкалу вместо функции, как было предложено. Наконец-то это работает, так как пузырьковая диаграмма теперь отображает цвета на основе логики colorAccessor. Большое спасибо за указание на это! - person Yash Nigam; 23.06.2017
comment
Круто, рад, что смог помочь! - person Gordon; 23.06.2017