DC.jsシリーズのチャートがcolorAccessorロジックに応答しません

Question

DC js円グラフとシリーズチャートの間に一般的な着色スキームを設定しようとしています。私は自分の必要条件（20トピックで20色必要）に基づいて色付けスケールを作成し、次にシリーズチャートからcolorAccessor関数を使用してドメイン値を返そうとしました。しかし、colorAccessor関数は、colorAccesor関数内からconsole.log（d）を実行しようとしたが、コンソール画面に何も記録されていないため、シリーズチャートで動作しないようです。そして、それは、色が円グラフとシリーズチャートで同じ値のために共有されていない理由だと思います。

は、ここに私のコードです

var TopicColorScale = d3.scale.ordinal().domain(["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","default"]) 
.range(["#18a3ad", "#b85436", "#3fe825","#e82825","#8793a5","#577c77","#c1f9a2","#f2c4cd","#a4f4f9","#003366","#fff4d8","#00245e","#e5ffd8","#471b1b","#ff6666","#ff9811","#11c7ff","#8fbec9","#b5b7e0","#ffc4d9","#f6ff02"]); 

//d.keyサンプル値：「topic6、インターネット、広告、オンライン」私はドメインのトピック番号を抽出し、各トピック

に異なる色をしたいのです

topicChart.width(350) 
.height(350) 
.radius(160) 
.innerRadius(30) 
.dimension(maxtopicVal) 
.title(function(d){ return "Topic : "+d.key+"\n Maxweight sum: "+d.value+'\n Percentage: '+ Math.round((d.endAngle - d.startAngle)/Math.PI * 50) + '%';}) 
.group(maxtopicValGroup) 
.colorAccessor(function(d){ 
    return d.key.split(",")[0].slice(5); 
}) 
.colors(TopicColorScale); 

これは問題なく機能し、円グラフで希望の色が得られます。しかし、シリーズチャートで同じものをプロットしようとすると、スケールから色が得られますが、同じ値が2つのチャート全体で同じ色にマッピングされません。例えば、トピック1は、円グラフ上に赤色を有し、シリーズチャート上に青色を有する。系列グラフのためのコードは次のようであり、この例に言及した後に実施された：（。問題私のコードでがあるか否か）http://dc-js.github.io/dc.js/examples/range-series.html

focusChart 
.width(920) 
.height(380) 
.chart(function(c) { return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); }) 
.x(d3.scale.linear().domain([1995,2017])) 
.brushOn(false) 
.yAxisLabel("Topic Weight") 
.xAxisLabel("Year") 
.elasticY(true) 
.dimension(series1Dimension) 
.group(series1Group) 
.colorAccessor(function(d){ 
    return d.key.split(",")[0].slice(5); 
}) 
.colors(TopicColorScale) 
focusChart.seriesAccessor(function(d) {return " " + d.key[0];}) 
.keyAccessor(function(d) {return +d.key[1];}) 
.valueAccessor(function(d) {return +d.value;}) 

.legend(dc.legend().x(400).itemHeight(13).gap(1).horizontal(10).legendWidth(540).itemWidth(210));focusChart.yAxis().tickFormat(function(d) {return d3.format('d')(d);}); 
focusChart.xAxis().tickFormat(function(d) {return d3.format('d')(d);}); 
focusChart.margins().left += 20; 

私は問題が何であるかを把握することができませんそれシリーズのチャートと円グラフの間の共通の色付けスキームで私を助けてくれる人がいればいいでしょう。ありがとうございました:)

Answer 1

私はcolorAccessorを使用しようとしたとき、私は同様の問題がありました。私のソリューションは、同じカラーパレットをordinalColorsとシリーズチャートで使用して、私はseriesSortのソート関数を作成します。

// code ... 
graph.ufDimension = ndx.dimension(function(d) { 
     return d.uf; 
    }); 
graph.stateYearDimension = ndx.dimension(function(d) { 
     return [d.uf, +d.year]; 
    }); 
graph.ufRateGroup = graph.ufDimension.group().reduceSum(function(d) { 
     return +d.rate; 
    }); 
graph.stateYearRateGroup = graph.stateYearDimension.group().reduceSum(function(d) { 
     return +d.rate; 
    }); 
// more code ... 

graph.pallet=["#FF0000","#FF6A00","#FF8C00","#FFA500","#FFD700","#FFFF00","#DA70D6","#BA55D3","#7B68EE"] 

// more code ... 

this.lineRateStatesByYear 
     .width(fw) 
     .height(fh) 
     .margins({top: 0, right: 10, bottom: 45, left: 45}) 
     .chart(function(c) { return dc.lineChart(c).interpolate('cardinal'); }) 
     .x(d3.scale.ordinal()) 
     .xUnits(dc.units.ordinal) 
     .brushOn(false) 
     .yAxisLabel("km²/year") 
     .xAxisLabel(years[0].key + " - " + years[years.length-1].key) 
     .renderHorizontalGridLines(true) 
     .renderVerticalGridLines(true) 
     .title(function(d) { 
      return "Area/"+d.key[1]+": " + Math.abs(+(d.value.toFixed(2))) + " km²"; 
     }) 
     .elasticY(true) 
     .yAxisPadding('10%') 
     .dimension(this.stateYearDimension) 
     .group(this.stateYearRateGroup) 
     .mouseZoomable(false) 
     .seriesAccessor(function(d) { 
      return d.key[0]; 
     }) 
     .keyAccessor(function(d) { 
      return +d.key[1]; 
     }) 
     .valueAccessor(function(d) { 
      return +d.value; 
     }) 
     .ordinalColors(graph.pallet) 
     .seriesSort(function(a,b) { 
      var rank=graph.ufRateGroup.top(Infinity); 
      var sr=[]; 
      rank.forEach(function(d){ 
       sr[d.key]=+d.value; 
      }); 
      return d3.descending(sr[a], sr[b]); 
     }) 
     .legend(dc.legend().x(fw - graph.lineRateStatesByYear.margins().right - 40).y(5).itemHeight(13).gap(7).horizontal(0).legendWidth(50).itemWidth(40)); 

    this.pieTotalizedByState 
     .height(fh) 
     .width(parseInt(fw/4)) 
     .innerRadius(10) 
     .externalRadiusPadding(30) 
     .dimension(this.ufDimension) 
     .group(this.ufRateGroup) 
     .title(function(d) { 
      return "Area: " + Math.abs(+(d.value.toFixed(2))) + " km²"; 
     }) 
     .label(function(d) { 
      return d.key + ":" + parseInt(Math.round(+d.value)); 
     }) 
     .ordinalColors(graph.pallet) 
     .legend(dc.legend().x(1).y(5).itemHeight(13).gap(7).horizontal(0).legendWidth(50).itemWidth(40)); 

私は私のプロトタイプと完全なコードをテストし、作成するためのgithub repositoryを持っているが、エントリ・ポイント・ダッシュボード・prodes-rates.htmlに含まれるファイルにより、化合物です。メインのJSファイルはdashboard-prodes-rates-datatable.jsです。ここでは、チャートの実装を記述しています。