Question

我一直在尝试在DC js饼图和系列图表之间设置一个通用的着色方案。我根据我的要求创建了着色比例（20个主题需要20种颜色），然后我尝试通过系列图表中的colorAccessor函数返回域值。但是，colorAccessor函数似乎不适用于系列图表，因为我尝试从colorAccesor函数中调试console.log（d），但控制台屏幕上没有记录任何内容。我猜这就是饼图和系列图表中不相同颜色共享颜色的原因。

这是我的代码

    private List<String> getDataFromApi() throws IOException {
        DateTime now = new DateTime(System.currentTimeMillis());
        List<String> eventStrings = new ArrayList<String>();
        Events events = mService.events().list("primary")
                .setMaxResults(10)
                .setTimeMin(now)
                .setOrderBy("startTime")
                .setSingleEvents(true)
                .execute();
        List<Event> items = events.getItems();

        for (Event event : items) {
            DateTime start = event.getStart().getDateTime();
            if (start == null) {
                start = event.getStart().getDate();
            }
            eventStrings.add(
                    String.format("%s (%s)", event.getSummary(), start));
        }
        return eventStrings;
    }

// d.key样本值：＆＃34; topic6，互联网，广告，在线＆＃34;我正在提取域的主题编号，并希望每个主题使用不同的颜色

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"]);

这很好用，我在饼图上得到了所需的颜色。但是，当我尝试使用系列图表进行相同的绘制时，我会从比例中获取颜色，但相同的值不会在两个图表中映射到相同的颜色。例如，主题1在饼图上的颜色为红色，在系列图表上为蓝色。系列图表的代码如下所示，并在参考此示例后实现：http://dc-js.github.io/dc.js/examples/range-series.html

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

我无法弄清楚问题是什么（我的代码是否存在问题。）如果你们中的任何人能够帮助我使用系列图表和饼图之间的常用着色方案，那就太好了。或者朝着正确的方向推动我！谢谢:)）

Answer 1

当我尝试使用colorAccessor时，我确实遇到了类似的问题。我的解决方案使用相同颜色的托盘到ordinalColors，在系列图表中我为seriesSort创建了sort函数。

// 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来测试和创建我的原型，完整的代码是由入口点dashboard-prodes-rates.html中包含的文件组成的。主要的JS文件是dashboard-prodes-rates-datatable.js，我将图表实现。

DC.js系列图表不响应colorAccessor逻辑

1 个答案: