如何基于数据集指定属性设置dc.graph.js节点颜色

你当前代码不生效的核心原因是没有绑定实际的fiber content属性，且颜色映射规则和你的数据集不匹配，按以下步骤修改即可：

1. 修正颜色维度定义（如果需要支持颜色维度过滤） #

你之前参考的随机示例用了不存在的color字段，需要替换为你实际的纤维含量属性，注意属性名带空格，必须用中括号访问：

// 把原来的colorDimension定义替换成这个
var colorDimension = node_flat.crossfilter.dimension(function(n) {
        return n['fiber content']; // 绑定实际的纤维含量属性
    }),
    colorGroup = colorDimension.group();

如果你不需要基于纤维含量做交叉筛选操作，colorDimension和colorGroup可以直接删除，不需要定义。

2. 修正节点填充色的映射逻辑 #

调整nodeFill回调的返回值，同时修改颜色比例尺的定义域和你的三个纤维含量取值对应：

var colors = ['#1b9e77', '#d95f02', '#7570b3']; // 依次对应high、medium、low的颜色

Diagram
    .autoZoom('once-noanim')
    .altKeyZoom(true)
    .nodeFixed(function(n) { return n.value.fixed; })
    .nodeLabelFill(function(n) {
        var rgb = d3.rgb(Diagram.nodeFillScale()(Diagram.nodeFill()(n))),
            brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
        return brightness > 127 ? 'black' : 'ghostwhite';
    })
    // 修改nodeFill返回纤维含量值作为颜色映射的key
    .nodeFill(function(kv) {
        return kv.value['fiber content'];
    })
    // 修改比例尺domain和三个纤维含量取值对应
    .nodeFillScale(d3.scale.ordinal().domain(['high','medium','low']).range(colors))

如果不需要自定义边的虚线样式，dashDimension、dashGroup和dasheses相关代码可以直接删除，不影响节点颜色功能。

内容的提问来源于stack exchange，提问作者happylilem