dc.js 中的多线顺序图
Multi line ordinal chart in dc.js
我在这里遇到了一个问题。虽然可能很简单,但我很难弄清楚。我想在 dc 复合图表上显示多条线。
我的数据是这样的:
{ 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 轴绘制名称,并根据 Y 轴绘制标记 1 和标记 2。我在这里找到了一个 fiddle ,它使用线性比例来达到相同的结果。 http://jsfiddle.net/anmolkoul/mzx6mnru/3/
但它使用线性刻度,因为基本尺寸是数字的。我的基本维度是一个字符串,因此不能使用相同的代码。我认为这是由于我正在使用的比例定义。这是我需要帮助的 fiddle:http://jsfiddle.net/anmolkoul/pjLoh1az/1/
我目前将我的 x 轴定义为
.x(d3.scale.ordinal().domain(nameDimension))
.xUnits(dc.units.ordinal)
我认为这是错误的地方。我还有两个补充问题:
- 完成后,如何为线条分配不同的颜色(它也应该反映在图例中)
- 我在看
dc.js
系列图,这行代码是做什么的?
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
它旋转二维吗?或者它只是一种创建两个交叉过滤器维度的更快方法。
感谢您的帮助!`
您可以通过以下方式获取序数值:
nameDimension.top(Infinity).map(function(d) {return d.Name}))
which returns ["Mike", "John", "Firen"]
,然后将其用于序数域。
但没有必要,它是自动计算的:
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
对于颜色,您可以使用:
dc.lineChart(lineChart1).group(mark1Group,"Mark 1").colors("#FF0000")
这里是 fiddle 进行了这些修改:http://jsfiddle.net/1exo25u9/
我在这里遇到了一个问题。虽然可能很简单,但我很难弄清楚。我想在 dc 复合图表上显示多条线。 我的数据是这样的:
{ 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 轴绘制名称,并根据 Y 轴绘制标记 1 和标记 2。我在这里找到了一个 fiddle ,它使用线性比例来达到相同的结果。 http://jsfiddle.net/anmolkoul/mzx6mnru/3/
但它使用线性刻度,因为基本尺寸是数字的。我的基本维度是一个字符串,因此不能使用相同的代码。我认为这是由于我正在使用的比例定义。这是我需要帮助的 fiddle:http://jsfiddle.net/anmolkoul/pjLoh1az/1/
我目前将我的 x 轴定义为
.x(d3.scale.ordinal().domain(nameDimension))
.xUnits(dc.units.ordinal)
我认为这是错误的地方。我还有两个补充问题:
- 完成后,如何为线条分配不同的颜色(它也应该反映在图例中)
- 我在看
dc.js
系列图,这行代码是做什么的?
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
它旋转二维吗?或者它只是一种创建两个交叉过滤器维度的更快方法。
感谢您的帮助!`
您可以通过以下方式获取序数值:
nameDimension.top(Infinity).map(function(d) {return d.Name}))
which returns ["Mike", "John", "Firen"]
,然后将其用于序数域。
但没有必要,它是自动计算的:
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
对于颜色,您可以使用:
dc.lineChart(lineChart1).group(mark1Group,"Mark 1").colors("#FF0000")
这里是 fiddle 进行了这些修改:http://jsfiddle.net/1exo25u9/