使用函数返回一系列笔画颜色 [英] Using a function to return a series of colors for stroke
问题描述
我需要微调函数以返回一系列颜色以及一系列x，y对以创建多色线。这是MWE：
I need help fine-tuning a function to return a series of colors to go with a series of x,y pairs to create a multicolored line. Here is a MWE:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src = "http://d3js.org/d3.v3.min.js"> </script>
</body>
<script>
var margin = {top: 100, right: 20, bottom: 20, left: 20},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var xdata = d3.range(0, 10);
var ydata = [1, 12, 5, 9, 10, 14, 6, 15, 11, 10];
var colorvec = ["#00FFB3", "#80FF00", "#00E0FF", "#0075FF", "#00FFB3", "#00FFB3", "#80FF00", "#00E0FF", "#00FFB3", "#80FF00"]
var xyc = [];
for(var i = 0; i < xdata.length; i++ ) {
xyc.push({x: xdata[i], y: ydata[i], col: colorvec[i]});
}
var xscl = d3.scale.linear()
.domain(d3.extent(xyc, function(d) {return d.x;}))
.range([margin.left, width + margin.left])
var yscl = d3.scale.linear()
.domain(d3.extent(xyc, function(d) {return d.y;}))
.range([height + margin.top, margin.top])
var myline = d3.svg.line()
.x(function(d) { return xscl(d.x);})
.y(function(d) { return yscl(d.y);})
var svg = d3.select("body")
.append("svg")
.attr("width",window.innerWidth)
.attr("height",window.innerHeight)
svg.append('rect') // outline for reference
.attr({x: margin.left, y: margin.top,
width: width,
height: height,
stroke: "black",
'stroke-width': 0.5,
fill:'white'});
svg.append("path")
.attr("class", "line")
.attr("d", myline(xyc))
.style("fill", "none")
// .style("stroke", function() { return "red"; }) // works fine but trivial
// .style("stroke", function(d) { return xyc[0].col; }) // returns 1 col
.style("stroke", function(d) {
for (var i = 0; i < d.length; i++) {return d[i].col;}}) // help here!
.style("stroke-width", 2);
</script>
我如何在控制笔画的末端附近修改函数，以使<$ c中的每种颜色$ c> myc 依次用于这些段，从而创建了多色线？我相信 myc 是一个对象数组，我只想访问存储在 col中的颜色。照原样，返回值是不确定的。
How can I modify the function near the end which controls the stroke so that each color in myc is used sequentially for the segments, creating a multicolored line? I believe that myc is an array of objects and I want to get access to just the colors stored in "col". As is, the return value is undefined.
推荐答案
此处显而易见的解决方案是创建9条不同的线，每条线都有各自的颜色。不过，这没什么好玩的（并且没有利用 d3 线生成器的优势），所以让我们看看我们可以对渐变进行哪些操作。 d3 在此问题：
The obvious solution here would be to create 9 different lines each with their own color. That's no fun, though, (and doesn't take advantage of the d3 line generator) so let's see what we can do with gradients. d3ifying the double stop coolness in this question:
// create a def
var grade = svg.append("defs")
.append("linearGradient")
.attr("id", "myGrade");
// add the gradient for each segment
colorvec.forEach(function(d, i) {
grade.append("stop")
.style("stop-color", d)
.style("stop-opacity", 1)
.attr("offset", i / (colorvec.length));
grade.append("stop")
.style("stop-color", d)
.style("stop-opacity", 1)
.attr("offset", (i + 1) / (colorvec.length));
});
...
// apply the gradient
svg.append("path")
.attr("class", "line")
.attr("d", myline(xyc))
.style("fill", "none")
.style("stroke", "url(#myGrade)")
.style("stroke-width", 2);
示例此处。
注意，我删除了您的一种颜色，得到了10分9个段。
Note, I removed one of your colors, for 10 points we have 9 segments.
还要注意，这仅在x值等距分布时有效。
Also note, that this only works if the x values are equally spaced.
以下是每个线段的路径：
Here's the alternative, a path for each line segment:
var abc = [];
for (var i = 0; i < xdata.length-1; i++) {
abc.push({
p: [{x:xdata[i],y:ydata[i]}, {x:xdata[i+1],y: ydata[i+1]}],
col: colorvec[i]
});
}
svg2.selectAll('.segment')
.data(abc)
.enter().append('path')
.attr('class','segment')
.attr('d', function(d) { return myline(d.p); })
.attr('stroke-width', 2)
.attr('stroke', function(d) { return d.col; });
示例已更新此处。
不过，这样做的局限性在于您将无法使用插值，因为它现在是9个单独的路径。
The limitation of this, though, is you won't be able to use interpolation since it's now 9 separate paths.
这篇关于使用函数返回一系列笔画颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
