使用DC.js获取从饼图中选择的切片颜色

Question

我有一个协调的饼图和条形图。我的饼图包含年份列表，并且我的条形图包含每年的信息。当我在饼图中点击一年时，条形图会显示该年的相关详细信息。

场景 需要将条形颜色更改为饼图切片上的饼图中选定的切片颜色。

请指教。

Answer 1

首先设置一个常见的颜色扩展您的柱状图和饼状图

pieChart 
    .colors(d3.scale.category10()) 
    ... 

和

barChart 
    .colors(d3.scale.category10()) 
    ... 

请注意，您可能需要选择一个不同取决于你有值的数量。

然后，为条形图设置colorAccessor，以便根据每个条对应的饼图索引选择一个索引。如果您可以访问所有的独特pieValues（您可以使用。所有（）和.map（）的馅饼组得到这个容易。喜欢的东西

var pieValues = year_total.all().map(function(d) { return d.key }); 

其中year_total是馅饼维度组。

假设你有可用的基础数据，这将是很容易得到的东西用右手食指像

.colorAccessor(function(d, i){ return years.indexOf(data[i].Year); }) 

，这一切！

---

小提琴 - http://jsfiddle.net/r8yern6o/

---

基本代码改编自优秀教程在http://www.codeproject.com/Articles/697043/Making-Dashboards-with-Dc-js-Part-2-Graphing（一个从https://github.com/dc-js/dc.js/wiki>书籍和教程部分链接到）

对于后代，假设你有所有的库包括

JS

var barChart = dc.barChart("#chart-line-hitsperday"); 

var data = [ 
    {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100}, 
    {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100}, 
    {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200}, 
    {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0}, 
    {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0}, 
    {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0}, 
    {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1}, 
    {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0}, 
    {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0}, 
    {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0}, 
    {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1}, 
    {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100} 
]; 
var ndx = crossfilter(data); 
var parseDate = d3.time.format("%m/%d/%Y").parse; 
data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.total= d.http_404+d.http_200+d.http_302; 
    d.Year=d.date.getFullYear(); 
}); 

var dateDim = ndx.dimension(function(d) {return d.date;}); 
var hits = dateDim.group().reduceSum(function(d) {return d.total;}); 
var minDate = dateDim.bottom(1)[0].date; 
var maxDate = dateDim.top(1)[0].date; 

var pieChart = dc.pieChart("#chart-ring-year"); 
var yearDim = ndx.dimension(function(d) {return +d.Year;}); 
var year_total = yearDim.group().reduceSum(function(d) {return d.http_200+d.http_302;}); 
var pieValues = year_total.all().map(function(d) { return d.key }); 

barChart 
    .colors(d3.scale.category10()) 
    .width(500).height(200) 
    .dimension(dateDim) 
    .group(hits) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .brushOn(false) 
    .xUnits(d3.time.days) 
    .colorAccessor(function(d, i){ return pieValues.indexOf(data[i].Year); }) 
    .yAxisLabel("Hits per day"); 

pieChart 
    .colors(d3.scale.category10()) 
    .width(150).height(150) 
    .dimension(yearDim) 
    .group(year_total) 
    .innerRadius(30); 

dc.renderAll(); 

HTML

<div id="chart-ring-year"></div> 
<div id="chart-line-hitsperday"></div>