【发布时间】:2016-10-02 01:07:12
【问题描述】:
基于此示例: 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/
【问题讨论】:
标签: d3.js