Question

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

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

请告知。

Answer 1

首先为条形图和饼图设置常用颜色比例

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

和

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

请注意，您可能需要选择不同的值，具体取决于您拥有的值的数量。

然后，对于条形图设置colorAccessor，以便它根据与每个条形对应的饼图索引选择一个索引。如果你有权访问所有独特的pieValues（你可以在派对组上使用.all（）和.map（）轻松搞定。像

这样的东西

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

其中year_total是饼图维度的组。

假设您有可用的基础数据，使用

之类的东西就可以轻松获得正确的索引

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

就是这样！

小提琴 - 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＆gt;图书和教程部分）的优秀教程

对于后代，假设您包含所有库

<强> JS

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

<强> HTML

ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.currentRequestAttributes();
            HttpServletRequest servletRequest = attributes.getRequest();
            ipAddress = String.valueOf(servletRequest.getSession().getAttribute("clientAddress"));

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

1 个答案: