d3响应多行

Question

我使用本文中的代码构建初始响应线图：

https://blog.safaribooksonline.com/2014/02/17/building-responsible-visualizations-d3-js/

我更新了它以允许绘制多行。我正在使用angular指令中的数据驱动行，并且绘制行的代码更像是这样（这是coffeescript但你明白了，seriesConfig是一个自定义的JS对象，它有关于数据的信息）：

for series in seriesConfig

    newLine = d3.svg.line()
      .x((d) -> return xScale(getXValue(d)))
      .y((d) -> return yScale(getYValue(d, series)))

我正在努力的部分是在调整浏览器大小时再次更新行。在他的文章中，他使用此代码将行存储为变量：

graph.selectAll('.line').attr("d", line)

但是这里我有多行。让每一行重绘自己的适当方法是什么？

提前致谢！

Answer 1

我明白了。我为每一行分配了一个唯一的ID，并将其存储在一个键入ID和行的哈希值中，然后在onResize中我选择了该行的ID并使用哈希值更新它。

我遇到的另一个问题是他的代码将onResize挂钩到只有一行。我更新了

d3.select(window).on "resize"

是

d3.select(window).on "resize.#{lineId}"

这样就有多个侦听器被分配给resize事件，因为我猜你可以命名范围（通过后缀）事件的唯一实例，就像我在这里完成的那样。