时间戳

首页 > 解决方案 > DC 图表中的动态颜色

dc.js - DC 图表中的动态颜色

问题描述

我正在使用 DC.js 构建一个数据仪表板，并且想知道是否可以根据它所引用的字段中的值动态更改饼图中切片的颜色。

基本上我已经建立了一个汇总不同超级英雄服装颜色的饼图，我希望能够用它所指的颜色为每个切片着色 - 所以“黑色”的切片是黑色的，“黑色”的切片是黑色的Green' 是绿色的，以此类推。

我对 DC.js 还很陌生，所以接受这可能是不可能的，但我想把它扔在那里看看是否可以完成！

我尝试在 .ordinalColors 中包含一个数组，但不知道是否有办法从字段中动态提取数据。我假设我必须将 .csv 文件中的数据更改为可以被识别为颜色参考的字符串，但不知道如何去做。

function show_costume_color(ndx) {
   var costume_color_dim = ndx.dimension(dc.pluck('Costume Colour'));
   var costume_color = costume_color_dim.group();

dc.pieChart('#costume-color')
    .width(500)
    .height(500)
    .radius(500)
    .innerRadius(100)
    .slicesCap([7])
    .transitionDuration(1500)
    .dimension(costume_color_dim)
    .group(costume_color);
}

CSV 数据采用以下格式

ID,name,Gender,Eye color,Race,Hair color,Publisher,Alignment,Superpower,Superpower Strength Level,Costume 
Colour
0,A-Bomb,Male,Yellow,Human,No Hair,Marvel Comics,Good,Superhuman 
Strength,10,None
1,Abin Sur,Male,Blue,Ungaran,No Hair,DC Comics,Good,Cosmic Power,40,Green

标签： dc.js

解决方案

因此，我通过大量的反复试验设法弄清楚了这一点，现在我已经离开了我的仪表板。谢谢你的帮助，戈登——它真的很重要！它需要一些整理，但我的工作测试代码如下。

// Bring in data from both csv files

Promise.all([d3.csv("../data/heroes_information.csv"), 
d3.csv("../data/costume_colors.csv")])
    .then(function(data) {

        // Tidy up data before use

        data.forEach(function(d) {
            d.Height = +d.Height;
            d.Weight = +d.Weight;
            d.Strength = +d.Strength;
        });

        // Bring in colorScale to dynamically color pie chart slices

        var ndxcol = crossfilter(data[1]);

        var colorScale = d3.scaleOrdinal()
            .domain(data[1].map(row => row.Name))
            .range(data[1].map(row => row.RGB));

        // Bring in superhero data

        var ndx = crossfilter(data[0]);

        // Define chart types

        var publisherSelector = dc.selectMenu('#publisher-selector')
        var genderChart = dc.rowChart('#gender-balance');

        // Define chart dimensions

        var publisherChoice = ndx.dimension(dc.pluck('Publisher'));
        var genderBalance = ndx.dimension(dc.pluck('Gender'));

        // Define chart groups

        var genderNumber = genderBalance.group();
        var publisherNumber = publisherChoice.group();

        // Draw charts

        publisherSelector
            .dimension(publisherChoice)
            .group(publisherNumber);

        genderChart
            .width(500)
            .height(200)
            .margins({ top: 30, right: 30, bottom: 30, left: 30 })
            .dimension(genderBalance)
            .group(genderNumber)
            .gap(6)
            .colors(colorScale)
            .transitionDuration(500)
            .x(d3.scaleOrdinal())
            .elasticX(true);

        dc.renderAll();

    });

推荐阅读