为什么这两条线都是同一种颜色?

时间:2014-11-07 03:57:22

标签: d3.js coffeescript

我觉得我在这里疯了。我一直在凝视和凝视,必须遗漏一些明显的东西。

请参阅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

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

我没有得到它,这里没有延迟执行,如果我将执行命令放在函数外的每个节点上,它就可以工作。

我错过了什么?

修改: Here's the same thing without the helper function - everything's working great.

2 个答案:

答案 0 :(得分:3)

  

如果我将stroke命令放在它运行的函数之外的每个节点上。

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

对我来说,改变对svg的引用的属性会改变它们是有道理的,因为它必须保留你所附加的所有属性的引用,从而将它们的所有属性更改为蓝色。

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

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

答案 1 :(得分:0)

它不会让我添加注释所以这里是一个尝试的答案:我认为问题是你传入lineColor函数中的整个SVG元素,该函数全局设置笔触颜色,即SVG上的所有行。在每个行的SVG上附加一个“g”元素,然后将其传递给lineColor函数。这应该可以解决你的问题!

很抱歉缺少代码示例,我不熟悉CoffeeScript ......