Блог

На основе этого примера: 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 /

Это оказалось ошибкой в самом модуле. Я уведомил автора, и он исправил способ сортировки пороговых значений, чтобы теперь они совпадали с соответствующими цветами.