【问题标题】:Multi line ordinal chart in dc.jsdc.js 中的多线序数图
【发布时间】:2015-08-21 16:02:58
【问题描述】:

我在这里遇到了一个问题。虽然可能很简单,但我很难弄清楚。我想在 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 轴上,并将 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系列图表,这行代码是做什么的?

runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });

它是否旋转两个维度?还是只是一种创建两个交叉过滤器维度的更快方法。

感谢您的帮助!`

【问题讨论】:

    标签: dc.js


    【解决方案1】:

    您可以通过以下方式获取序数值:

    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/

    【讨论】:

    • 您不需要设置序数域;它是自动计算的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-08-06
    • 2020-03-15
    • 2017-05-12
    • 2014-05-26
    • 2014-07-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多