dc.js линейная диаграмма с диапазоном цветов

Question

У меня есть составной график двух линейных диаграмм. Для одного из них я пытаюсь применить пользовательский диапазон цвета на основе значения каждой точки на линии:

.colors(['rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,144)']) 
.colorDomain ([0,3]) 
.colorAccessor (d,i) -> 
    if d.points[i].data.value.avg > 50 
    return 0 
    else 
    return 3 

Проблема я получаю только один цвет для всего графа ... Не говоря d возвращает в качестве объекта всех точек вместо одной точки ... (может быть намек на проблемы?)

я делаю что-то здесь не так, и/или есть более простой способ сделать это?

Answer 1

Вы не получили ответа, поэтому я попытаюсь изучить его с вами.

Во-первых, я создал скрипку по адресу http://jsfiddle.net/djmartin_umich/4ZwaG/.

.colors(['rgb(215,48,39)', 'rgb(244,109,67)', 'rgb(253,174,97)', 'rgb(254,224,144)' ]) 
.colorDomain ([0,3]) 
.colorAccessor(function(d, i){ 
    if(d[i] && d[i].data.value > 150) 
    return 3; 
    else if(d.data.value > 150) 
    return 2; 
    else return 1; 
}); 

Мне пришлось поиграть с аксессуаром цвета, чтобы заставить его прекратить бросать ошибки. Метод дважды вызывался с массивом элементов и дважды для каждого элемента массива (24 раза всего).

После того, как я получил его компиляции я проверил график и увидел это:

Диаграмма имеет элемент пути, который определяет линию и кучу кругов, которые определяют точки на линии. Точки являются частью инструментальной подсказки, отображаемой при наведении курсора на разные точки линии.

Путь, по-видимому, окрашен значением, возвращаемым при передаче массива значений, и точки наведения на линии окрашены значением, возвращаемым для этого элемента.

Таким образом, путь линии задан одним цветом. Похоже, ваше ожидание заключается в том, что разные части строки будут по-разному окрашены в зависимости от их значения y, но это не то, как линия отображается.

В статье по адресу http://www.d3noob.org/2013/01/applying-colour-gradient-to-graph-line.html описано, как вы можете использовать градиенты для достижения желаемого эффекта. Я считаю, что автор «жестко кодирует» точки старта и остановки для каждого градиента, поэтому он не даст вам пути к вашему ответу, но он должен помочь вам начать работу.

Надеюсь, это поможет! -DJ