【发布时间】：2021-10-09 15:43:32
【问题描述】：
我想使用一系列不同的颜色绘制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, ...)
它给出了这样的图（编辑：添加了详细视图）：
我想在JavaScript 中执行此操作。我看到有几种方法可以将渐变应用于笔画，但这不是我需要的。就我而言，每个线段都需要自己的颜色。关于如何在js 中有效地完成此任务的任何建议？我可以单独循环各个部分，并一次绘制一个，每个部分都有自己的颜色，但这听起来很慢（我没有尝试过，也许它比我想象的要快）。我正在使用js 代码以黑色或其他方式绘制线条。我希望我可以将颜色向量传递给 stroke 属性，但这不是js 方式。有没有我错过的技巧来做到这一点？
编辑：我正在使用d3.svg.line 画线。
EDIT2：经过进一步研究，我受到了question 的启发，这让我从this 提出了一些不同的观点。那里有两个很好的完整答案。
【问题讨论】：
标签： javascript r svg