javascript - 使用不同颜色(不是渐变)为 SVG 路径着色的有效方法

Question

我想使用不同系列的颜色绘制 svg 路径。颜色列表是有限的，但它不是渐变，它是从路径/线外部的值导出的。在 R 中，我这样做，作为一系列片段和关联的颜色向量。有很多数据点(数千个)，因此即使每个片段的颜色可能突然变化，效果也是平滑的:

# Color scale for each level
# blue/low -> red/high, anchored at zero (index 5, a shade of green)
# max and min will come from the data (i.e., red will be at max of V)
cscale <- c(rev(rainbow(4, start = 0.45, end = 0.66)),
  rev(rainbow(5, start = 0.0, end = 0.25)))
# view with:
# pie(rep(1, 9), col = cscale)

refscale <- seq(-1, 1, length.out = 9)  
myc <- cscale[findInterval(C[row,], refscale)] # C is a correlation matrix, values -1 ... 1

np <- length(spectra$freq)
ind1 <- 1:(np-1)
ind2 <- 2:np

plot(spectra$freq, V[row,], type = "n") # V is a covariance matrix, values -Inf ... Inf
segments(spectra$freq[ind1], V[row, ind1], spectra$freq[ind2], V[row, ind2],  col = myc, ...)

这给出了这样的数字(编辑:添加了详细 View ):

我想在 JavaScript 中执行此操作。我看到有多种方法可以将渐变应用于笔画，但这不是我需要的。就我而言，每个线段都需要自己的颜色。关于如何在 js 中有效地完成此任务有什么建议吗？我可以单独循环这些片段，并一次用它们自己的颜色绘制它们，但这听起来很慢(我没有尝试过，也许它比我想象的要快)。我有工作 js 代码，可以用黑色或其他方式绘制线条。我希望我可以将颜色向量传递给描边属性，但这不是 js 方式。我是否缺少一个技巧来做到这一点？

编辑:我正在使用d3.svg.line绘制线条。

编辑2:经过进一步研究，我受到了这个question的启发。这导致我向this询问有点不同的观点。那里有两个很好的完整答案。

Answer 1

如果这些都是您要绘制图表的函数(一个 x 值 -> 一个 y 值)，那么从技术上讲，您可以使用过滤器来完成此操作，但可能需要做更多的工作，而 Canvas 是更好的选择。但是，如果您确实想留在 d3 中，并且出于某种原因确实想要一个单线对象，那么您可以通过创建与线段对齐的颜色蒙版并将其与您的线合成来实现。 (这在 Firefox 中不起作用 - 您需要将颜色掩码作为数据 URI 内联到 feImage 中才能跨浏览器)。示例:

<svg width="800px" height="600px" color-interpolation-filters="sRGB">
  <defs>
    
    <g id="colormask">
      <rect  x="0" y="0" height="600" width="50" fill="red"   stroke="none" />
      <rect  x="50" y="0" height="600" width="20" fill="blue"  stroke="none"   />
      <rect  x="70" y="0" height="600" width="50" fill="green"    stroke="none" />
      <rect  x="120" y="0" height="600" width="30" fill="grey"  stroke="none"   />
      <rect  x="150" y="0" height="600" width="15" fill="black" stroke="none"   />
      <rect  x="165" y="0" height="600" width="50" fill="blue"   stroke="none"  />
      <rect  x="215" y="0" height="600" width="20" fill="cyan"  stroke="none"   />
      <rect  x="235" y="0" height="600" width="50" fill="red"   stroke="none"  />
      <rect  x="285" y="0" height="600" width="30" fill="pink"  stroke="none"   /> 
      <rect  x="315" y="0" height="600" width="15" fill="magenta" stroke="none" />
      <rect  x="330" y="0" height="600" width="50" fill="yellow"   stroke="none"/>
      <rect  x="380" y="0" height="600" width="20" fill="purple"   stroke="none"/>
      <rect  x="400" y="0" height="600" width="50" fill="red"   stroke="none"  />
      <rect  x="450" y="0" height="600" width="30" fill="blue"  stroke="none"  /> 
      <rect  x="480" y="0" height="600" width="50" fill="pink"   stroke="none" />
      <rect  x="530" y="0" height="600" width="15" fill="grey" stroke="none"  />
    </g>
      
    <filter id="colorline" x="0" y="0" width="800" height="600" filterUnits="userSpaceOnUse">
     <feImage xlink:href="#colormask" result="mask1"/>
      <feComposite in2="SourceGraphic" in="mask1" operator="in" />
    </filter>
  </defs>
  
  <path filter="url(#colorline)" d="M0 50 l50,30 20,-15 50,-40 30,20 15,40 50,30 20,-15 50,-40 30,20 15,40 50,30 20,-15 50,-40 30,20 15,40 50,30 20,-15 50,-40 30,20 15,40 50,30 20,-15 50,-40 30,20 15,40 " fill="none " stroke="black" stroke-width="3"/>
</svg>