【问题标题】:Getting custom colors and thresholds to work with D3 RelationshipGraph获取自定义颜色和阈值以使用 D3 关系图
【发布时间】: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


    【解决方案1】:

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

    【讨论】:

    • 他在我提出要求的几分钟内就推送了错误修复!惊人的开源客户服务!
    猜你喜欢
    • 1970-01-01
    • 2021-07-19
    • 1970-01-01
    • 2020-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-27
    • 1970-01-01
    相关资源
    最近更新 更多