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