dc.js中的多行序数图

时间:2015-08-21 16:02:58

标签: dc.js

我在这里遇到了问题。可能很简单,但我很难搞清楚。我想在直流复合图表上显示多行。 我的数据是这样的:

{ Name: Mike, mark1: 26.9, mark2: 62.3 },
{ Name: John, mark1: 23.5, mark2: 60.3 },
{ Name: Firen, mark1: 24.3, mark2: 62.5 }

我需要针对X轴绘制名称,将mark1和mark2绘制为针对Y轴的线条。我发现这里有一个小提琴,它使用线性刻度来达到相同的效果。 http://jsfiddle.net/anmolkoul/mzx6mnru/3/

但它使用线性比例,因为基本维度是数字。我的基本维度是一个字符串,因此不能使用相同的代码。我认为这是由于我使用的比例定义。以下是我需要帮助的小提琴:http://jsfiddle.net/anmolkoul/pjLoh1az/1/

我目前将x轴定义为

.x(d3.scale.ordinal().domain(nameDimension))
.xUnits(dc.units.ordinal)

我认为这是出错的地方。我还有两个补充问题:

  1. 一旦完成,如何为线条指定不同的颜色(它也应反映在图例中)
  2. 我正在查看dc.js系列图表,这行代码的作用是什么?
  3. runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });

    是否会转动这两个维度?或者它只是创建两个交叉滤波器尺寸的更快方法。

    感谢您的帮助!`

1 个答案:

答案 0 :(得分:4)

您可以使用以下命令获取序数值:

nameDimension.top(Infinity).map(function(d) {return d.Name}))

返回["Mike", "John", "Firen"],然后将其用于序数域。

但是没有必要,它会自动计算:

.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)

对于颜色,您可以使用:

dc.lineChart(lineChart1).group(mark1Group,"Mark 1").colors("#FF0000")

以下是这些修改的小提琴:http://jsfiddle.net/1exo25u9/