获得自定义颜色和阈值以使用D3 RelationshipGraph

时间:2016-10-01 15:47:14

标签: d3.js

基于此示例: https://cdn.rawgit.com/hkelly93/d3-relationshipGraph/master/examples/index.html

D3应该允许我创建此图表并定义值何时更改颜色的颜色和阈值。该函数接受一些自定义设置:

var graph = d3.select('#graph').relationshipGraph({
    maxChildCount: 10,
    valueKeyName: 'Story title',
    thresholds: [6, 8, 10],
    colors: ['red', 'yellow', 'green'],
    showTooltips: true
})

但是当我将数据加载到所有3个范围时,我没有得到三种颜色的图形。我希望0-6显示为红色,7-8显示为黄色,9-10显示为绿色。这是加载的数据(摘录):

[
{"parent": "2012-October", "organization": "WEWASAFO", "value": 10, "Story title": "NUTRITION"},
{"parent": "2012-April", "organization": "Jitegemee", "value": 5, "Story title": "Life in the street"},
{"parent": "2011-May", "organization": "KENYA YOUTH BUSINESS TRUST (KYBT)", "value": 2, "Story title": "BUSINESS"}
]

除了在同一图表上组合自定义颜色和自定义阈值外,其他所有内容都会正确解析。任何一个人都可以工作,但不能同时工作。

源代码库在这里有一些文档: https://github.com/hkelly93/d3-relationshipgraph

从该文件:

thresholds: [100, 200, 300], // The thresholds for the color changes. If the values are strings, the colors are determined by the value of the child being equal to the threshold. If the thresholds are numbers, the color is determined by the value being less than the threshold.
colors: ['red', 'green', 'blue'], // The custom color set to use for the child blocks. These can be color names, HEX values, or RGBA values.

它没有明确声明子颜色对应于阈值出现的顺序。在此示例中,所有块都显示为红色。

我在这里测试了代码:https://jsfiddle.net/cgrx3e9m/

1 个答案:

答案 0 :(得分:1)

结果证明这是模块本身的一个错误。我通知了作者,他修正了对阈值进行排序的方式,以便它现在与相应的颜色相匹配。