为什么这两条线都出现相同的颜色？答案

【问题标题】：Why are both of these lines coming up the same color?为什么这两条线都出现相同的颜色？
【发布时间】：2015-01-03 19:19:43
【问题描述】：

我觉得我在这里要疯了。我一直盯着看，一定是漏掉了一些明显的东西。

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

我注意到我总是设置描边宽度、描边和填充，所以我做了一个辅助方法

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.

【问题讨论】：

@muistooshort 我也是这么想的，但是颜色变量会在它被调用时绑定。那只是javascript。我不确定，但我认为 d3 将元素写入为 append 被调用并依赖浏览器优化来不破坏布局

【解决方案1】：

它不允许我添加评论，所以这是一个尝试性的答案：我认为问题在于您在 lineColor 函数中传递了整个 SVG 元素，该函数会全局设置笔触颜色，即用于 SVG 上的所有线条。为每行添加一个“g”元素到 SVG 并将其传递给 lineColor 函数。这应该可以解决您的问题！

抱歉缺少代码示例，我对 CoffeeScript 不熟悉...

【讨论】：

【解决方案2】：

如果我将 stroke 命令放在函数之外的每个节点上，它就可以工作。

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

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

如果你有第二个参考，你可以得到两个不同的颜色。我确信有更好的方法来克隆更“d3”，但我没有很多经验。

【讨论】：

您将其重写为具有多个 svg 并在 thg svg 上设置颜色。我在路径上设置颜色。 Here is the same thing but without the helper function (and it's working!)
这个例子和你原来的不一样。首先，您更改节点的颜色并然后追加。在第二个示例中，您追加并然后更改颜色。事实上，改变第二个的顺序以匹配第一个发生的事情，你会再次得到双红。这再次验证了我的回答。
天哪，你是对的。被我自己聪明的咖啡脚本缩进挫败了。我的意思是在链的结果上调用lineColor
别怪coffeescript，我对我的傻脑袋负全责