小编Lui*_*uiz的帖子

dc.js带有颜色范围的折线图

我有两个折线图的复合图.对于其中一个,我试图根据线上每个点的值应用自定义颜色范围:

.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
Run Code Online (Sandbox Code Playgroud)

问题是我一直只为整个图形获得一种颜色...更不用说d返回作为所有点的对象而不是单个点...(可能是一个问题的提示?)

这是我得到的结果......

我在这里做错了什么和/或有更简单的方法吗?

d3.js crossfilter dc.js

7
推荐指数
1
解决办法
2560
查看次数

dc.js中的双Y轴线图

我有一个三线图的复合图表.其中一个图表是使用此处建议的"假"组.正如您在下面的快照中看到的那样,尽管第三个图表的比例与其他两个图表的比例非常不同.我想要的解决方案是在纯d3中显示双轴图表.我认为可以在主要的复合图表上使用.renderlet()来完成,但我想知道是否有一个纯粹的dc.js的"性感"解决方案?

这是一个快照:

在此输入图像描述

这是我的代码.(在coffeescript中)我尝试在内部图表上使用.y和.yAxis,但这没有效果.

    actualValuesChart = dc.lineChart(mainChart)
        .group(metric, "actual " + @displayName)
        .valueAccessor (d) -> d.value.avg
        .colors(['green'])
        .interpolate('basis-open')

    normValuesChart = dc.lineChart(mainChart)
        .group(metric, "normal " + @displayName)
        .valueAccessor (d) -> d.value.avg_avg
        .colors(['rgba(0,0,255,1)'])
        .interpolate('basis-open')

    clipsCountChart = dc.lineChart(mainChart)
        .group(buildFakeGroup(defaultClipsArray))
        .colors(['red'])
        .interpolate('basis-open')
        # .y(d3.scale.linear().range([100, 0]))
        # .yAxis(d3.svg.axis().scale(d3.scale.linear().range([100, 0])))

    mainChart
        .dimension(@dimension.monthStamp)
        .width(thisChart.width + 30)
        .height(thisChart.width*.333)
        .yAxisLabel(@displayName)
        .elasticY(true)
        .x(d3.time.scale().domain([minDate,maxDate]))
        .xUnits(d3.time.months)
        .brushOn(true)
        .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
        .renderHorizontalGridLines(true)
        .compose([actualValuesChart,normValuesChart,clipsCountChart])
Run Code Online (Sandbox Code Playgroud)

charts graph d3.js crossfilter dc.js

3
推荐指数
1
解决办法
2943
查看次数

标签 统计

crossfilter ×2

d3.js ×2

dc.js ×2

charts ×1

graph ×1