将其他参数传递给d3.svg.line()



我正在制作一个站点,该站点绘制用户从大型集合中挑选的数据集。为了使图(用户选项(归一化(用户选项(,我为每个数据集找到了最大(y(,并且我试图将其用作line().y()中的分母,但我无法找到一种让它进入的好方法。

数据集是看起来像这样的CSV:

site0586,id,depth,age,sed,quant,conc,influx,level
1, 94297, 0.1400, 8.390, 0.097, 50.5100, 50.5100, 4.87496, "C0P0"
2, 94298, 0.1760, 45.690, 0.083, 52.5800, 52.5800, 4.35011, "C0P0"
3, 94299, 0.2030, 73.660, 0.135, 29.8500, 29.8500, 4.03080, "C0P0"
...

默认X和Y是"年龄"one_answers" conc",但可以用户选择。用户选择数据集,然后将其绘制在同一图上,一个接一个地。随着图的添加,图表的刻度会进行调整,以适合整个Max-X和Max-y,并更早的图形更新以符合。X可以在数据集之间变化,而Y的X可以因五个数量级而变化,因此小价值线可以被大大压制。使它有点过渡,并且效果很好。

有时用户希望看到y的[0,1]归一化,因此与大价值相同的X尺度上可以看到小价值趋势;这是一个选择。简单 - 将Y域重置为[0,1],并将每个绘图的Y归为该数据集的最大值(y(。对于完美工作的点;对于我遇到了很多麻烦。

这是一张图,所以我构建了一个数据结构;当用户选择每个数据集时,我下载了它,nest()并将其推到数组中,并且由于我稍后将需要maxes,而当我在那里时,我会找到每个变量的域,请将它们放在一个称为heads的对象中并将其附加到嵌套数据中。所以我的数据结构看起来像这样:

datae:  [
{ "key": "300",
  "values": [
    {"site0300": 1, "id": 60383, "depth": 0,  ... }, ...
    {"site0300": 182, ... }
  ],
  "heads": { "depth": [0,5.9], "age": [107.4,16589.5], ...} 
},
{ "key": "586",
  "values": [
    {"site0586": 1, ...}, ...
  ],
  "heads": {...}
}
]

我已经将line().y()设置为(可能(使用一个可能为1或thisdata.max(y(的分母:

var lineFn = d3.svg.line()
  .x(function(d) { return xScale(d[xVar]) })
  .y(function(d) { return yScale(d[yVar]/normer) });

除非我不知道如何将datae[thisLineIdx].heads[yVar[1]]进入呼叫:

var lines = graf.selectAll('.line')
  .data(datae);
lines.enter()
  .append('path')
    .attr("d", function(d) { return lineFn(d.values) })

lines的每个成员从datae获取正确的条目,但是由于Svg.line((只想听到有关数组的信息(并且不会从其内部传达任何内容(,只有我将其称为Datae [thisLineLineDx],它才能做任何事情。。值,然后datae [thislineIdx]。头是无法访问的。

我可以设置所有数据[idx]。也没有任何将其包括在呼叫中的惯用方法。

ach -du! ages 一直被困在这个(每周一天(,一直到那里。现在,最后一个代码块进入:

var lines = graf.selectAll('.line')
  .data(datae);
lines.enter()
  .append('path')
    .attr("d", function(d) { 
      normer = gOpts.normIt.state ? d.heads[yVar][1] : 1; 
      return lineFn(d.values) })

现在我的linefn((在我想要的时候做我想做的。

但是,我不喜欢这种解决方案,因为它确实会使normer(较高级别的级别声明(以半全球方式漂浮在相关范围之外,因此准备造成其他一些恶作剧。因此,我认为这是一种愚蠢的方式,如果有人可以建议一些更复杂的东西,我会非常感激。

最新更新