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