d3.js - 为什么这两条线的颜色相同？

Question

我觉得我快要疯了。我一直盯着看，一定是错过了一些明显的东西。

参见 this example on jsbin

我希望弯曲的路径是蓝色的，单词下面的直线路径是红色的。

我注意到我总是设置笔画宽度、笔画和填充，所以我制作了一个辅助方法

lineColor = (color, node) ->
  node
    .attr 'stroke', color
    .attr 'stroke-width', 2
    .attr 'fill', 'none'

然后画出这样的路径

#curvy
lineColor 'blue', svg
  .append 'path'
  .attr 'd', line indentations

像这样

#underline
lineColor 'red', svg
  .append 'path'
  .attr 'd', usageLine usageCol

你会认为第一行是蓝色，第二行是红色，但它们都是红色的(或者最后使用的任何颜色)!

我不明白，这里没有延迟执行，如果我将 stroke 命令放在函数之外的每个节点上，它就会起作用。

我错过了什么？

编辑: Here's the same thing without the helper function - everything's working great.

Answer 1

if I put the stroke command on each node outside the function it works.

我没有看到发生这种情况:http://jsbin.com/woxehetobe/2/edit

对我来说，更改您对 svg 的引用的属性会更改所有这些属性，因为它必须保留您附加的所有属性的引用，从而将它们的所有属性更改为蓝色。

如果您有第二个引用，您可以获得不同的颜色。我确信有更好的方法来克隆更多的“d3”，但我没有太多这方面的经验。

工作示例:http://jsbin.com/woxehetobe/3/edit