Получить выбранный цвет фрагмента из круговой диаграммы, используя DC.js

Question

У меня есть скоординированный пирог и гистограмма. Моя круговая диаграмма содержит список лет, и моя гистограмма содержит информацию за каждый год. когда я нажимаю год в круговой диаграмме, на гистограмме отображаются соответствующие данные за год.

Сценарий Необходимо изменить цвет бара на выбранный цвет среза в пироге на клике на кусочке.

пожалуйста совет.

Answer 1

Сначала необходимо настроить общие цвета масштабироваться для бара и круговой диаграммы

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

и

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

Заметим, что вам, возможно, придется выбрать другой в зависимости от количества значений, которые вы имеете.

Затем для гистограммы установите colorAccessor так, чтобы он выбирал индекс, основанный на индексе круговой диаграммы, соответствующем каждому бару. Если у вас есть доступ ко всему уникальному pieValues ​​(вы можете получить это легко с помощью .all() и .map() на группе пироги. Что-то вроде

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

где year_total является группой для измерения пирога.

Если у вас есть ваши базовые данные доступны, то это будет достаточно легко получить правильный индекс, используя что-то вроде

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

и это все!

---

Fiddle - 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> Книги и раздел Tutorials)

для потомства, если у вас есть все библиотеки включены

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>