javascript - 如何根据数据集中的特定属性对 dc.graph.js 节点颜色进行排序？

Question

我想使用 dc.graph.js 可视化数据集，并且我想让节点根据数据文件中特定属性的不同值显示不同的颜色。这是我想可视化的示例 json 数据集：

"nodes": [
    {
      "id": 0,
      "name": "beans",
      "fiber content":"high"
    },
    {
      "id": 1,
      "name": "meat",
      "fiber content":"low"
    },
    {
      "id": 2,
      "name": "apple",
      "fiber content":"high"
    },
    {
      "id": 3,
      "name": "walnut",
      "fiber content":"medium"
    },
    {
      "id": 4,
      "name": "egg",
      "fiber content":"low"
    };

我希望所有纤维含量高的食物在图表上都具有相同的颜色，而纤维含量中等的食物显示另一种颜色，而纤维含量低的食物则显示第三种颜色。换句话说，我希望基本上把节点分成三组：高、中、低纤维含量，然后分别给每组分配颜色。我通读了 dc.graph.js API，发现 nodeKey 是节点属性的唯一标识符，所以我查看了演示 js，发现这个函数可以导入数据文件并定义属性项：

function on_load(filename, error, data) {
    var graph_data = dc_graph.munge_graph(data),
        nodes = graph_data.nodes,
        edges = graph_data.edges,
        sourceattr = graph_data.sourceattr,
        targetattr = graph_data.targetattr,
        nodekeyattr = graph_data.nodekeyattr;
    var edge_key = function(d) {
        return d[sourceattr] + '-' + d[targetattr] + (d.par ? ':' + d.par : '');
};
    var edge_flat = dc_graph.flat_group.make(edges, edge_key),
        node_flat = dc_graph.flat_group.make(nodes, function(d) { return d[nodekeyattr]; }),
        cluster_flat = dc_graph.flat_group.make(data.clusters || [], function(d) { return d.key; });

我不确定它如何识别导入数据集中的属性，所以我想知道是否需要指出并链接到代码中某处的“纤维含量”属性，以告诉它我的颜色组是基于什么的。对于颜色设置，刷亮过滤演示实际上在图形上具有颜色，但图形是在没有数据集的情况下随机自动生成的，因此没有围绕所涉及的属性进行任何分组。我尝试将以下有关颜色的代码片段（我主要从 Brushing-filtering.js 遵循）添加到上面相同的 on_load 函数，但它不起作用：

var colorDimension = node_flat.crossfilter.dimension(function(n) {
        return n.color;
    }),
    colorGroup = colorDimension.group(),
    dashDimension = edge_flat.crossfilter.dimension(function(e) {
        return e.dash;
    }),
    dashGroup = dashDimension.group();

var colors = ['#1b9e77', '#d95f02', '#7570b3'];
var dasheses = [
    {name: 'solid', ray: null},
    {name: 'dash', ray: [5,5]},
    {name: 'dot', ray: [1,5]},
    {name: 'dot-dash', ray: [15,10,5,10]}
];

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))),
            // https://www.w3.org/TR/AERT#color-contrast
            brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
        return brightness > 127 ? 'black' : 'ghostwhite';
    })
    .nodeFill(function(kv) {
        return kv.value.color;
    })
    .nodeFillScale(d3.scale.ordinal().domain([0,1,2]).range(colors))

关于如何实现这一点的任何提示？

标签： javascriptcolorsattributesdata-visualizationdc.js