Wie färbt man DC js Bubble Chart basierend auf dem Spaltenwert?

Question

Ich bin ziemlich neu zu DC js und habe versucht, ein Blasendiagramm in DC js mit benutzerdefinierten Farbcodierung einrichten, aber bisher nicht das Glück gehabt. Das Blasendiagramm funktioniert gut mit der Farbskala "d3.scale.category20()", löst jedoch einen Fehler "_colors.range ist keine Funktion" aus, wenn ich versuche, eine benutzerdefinierte Farbskala zu erstellen.

Ich möchte eine andere Farbe basierend auf dem Bereich der Variable "sic" geben. Zum Beispiel: Wenn der Wert zwischen 0 und 1000 liegt, sollte er rot sein, 1000-2000, er sollte blau sein und so weiter.

Ich habe versucht, eine d3 Ordinalskala zu erstellen und die Domäne und den Bereich für entsprechende Werte angeben, dann in der Farbe Accessor-Funktion, ich versuchte, den Domänenwert basierend auf den Wert der Variablen (d.key in diesem Fall jedoch), wenn ich den Code im Browser überprüfen, erhalte ich eine „_colors.range ist keine Funktion“ Typeerror

Hier ist die komplette dc js und crossfilter js Code

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(); 

Es wäre ein großer Hilfe, wenn jemand von euch darauf hinweisen könnte, was ich falsch mache und eine Lösung vorschlage. Vielen Dank.

Answer 1

Ich denke, Sie betrachten die version 2.0 documentation for chart.colors() aber mit Version 1.7 oder darunter. In früheren Versionen verwendete die Funktion eine Skalierung, keine Funktion.

Es sei denn, Sie haben einen guten Grund, ich denke, es ist besser Form, hier die Skala zu übergeben, als eine Funktion, die die Skala aufrufen.

Also statt

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

versuchen

  .colors(colorScale) 

Das heißt, ich glaube, Ihr Code mit dc.js 2.0 funktionieren sollte, die in diesem Jahr früh veröffentlicht wurde.