如何根据轴值更改d3js中的线条颜色？
如果X> 100，我想改变此折线图的颜色我希望它变成“红色”
有没有办法可以根据X的值在笔画颜色样式中使用条件？
http://jsfiddle.net/iamjeannie/b445svob/1/ 在此处输入链接说明
var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20}, { "x": 40, "y": 10}, { "x": 60, "y": 40}, { "x": 80, "y": 5}, { "x": 100, "y": 60}, { "x": 120, "y": 15}, { "x": 140, "y": 40}, { "x": 160, "y": 25}, { "x": 180, "y": 20}, { "x": 200, "y": 15}, { "x": 220, "y": 80}, { "x": 240, "y": 35}, { "x": 260, "y": 60} ]; //This is the accessor function we talked about above var lineFunction = d3.svg.line() .x(function(d) { return dx; }) .y(function(d) { return dy; }) .interpolate("linear"); //The SVG Container var svgContainer = d3.select("body").append("svg") .attr("width", 200) .attr("height", 200); //The line SVG Path we draw var lineGraph = svgContainer.append("path") .attr("d", lineFunction(lineData)) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); 
这是另一种方式，也许在某些情况下可能有所帮助：
我所做的就是使用filter分割数据：
var lineGraph1 = svgContainer.append("path") .attr("d", lineFunction(lineData.filter(function(d) { return dx <= 100; }))) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); var lineGraph2 = svgContainer.append("path") .attr("d", lineFunction(lineData.filter(function(d) { return dx >= 100; }))) .attr("stroke", "red") .attr("stroke-width", 2) .attr("fill", "none");
这是我提出的一个简单示例：
我们使用多行代替单一路径。
我们需要将数据转换为具有以下属性：
[ { x1: currentX, y1: currentY, x2: nextX, y2: nextY }, ... ]
然后我们可以根据数据使用条件stroke属性绘制它们：
var lines = svgContainer.selectAll('line') .data(lineData) .enter() .append('line') .attr('x1', function(d) { return d.x1; }) .attr('y1', function(d) { return d.y1; }) .attr('x2', function(d) { return d.x2; }) .attr('y2', function(d) { return d.y2; }) .attr("stroke", function (d) { return (dx > 50) ? 'red' : 'blue'; }) .attr("fill", "none") .attr("stroke-width", 2);
这是一个演示：
var lineData = [ {"x": 1, "y": 5}, {"x": 20, "y": 20}, { "x": 40, "y": 10}, { "x": 60, "y": 40}, { "x": 80, "y": 5}, { "x": 100, "y": 60}, { "x": 120, "y": 15}, { "x": 140, "y": 40}, { "x": 160, "y": 25}, { "x": 180, "y": 20}, { "x": 200, "y": 15}, { "x": 220, "y": 80}, { "x": 240, "y": 35}, { "x": 260, "y": 60} ]; //This is the accessor function we talked about above var lineFunction = d3.svg.line() .x(function(d) { return dx; }) .y(function(d) { return dy; }) .interpolate("linear"); //The SVG Container var svgContainer = d3.select("body").append("svg") .attr("width", 200) .attr("height", 200); lineData = lineData.map(function (point, index, arr) { var next = arr[index + 1], prev = arr[index - 1]; return { x: point.x, y: point.y, x1: point.x, y1: point.y, x2: (next) ? next.x : prev.x, y2: (next) ? next.y : prev.y }; }); var lines = svgContainer.selectAll('line') .data(lineData) .enter() .append('line') .attr('x1', function(d) { return d.x1; }) .attr('y1', function(d) { return d.y1; }) .attr('x2', function(d) { return d.x2; }) .attr('y2', function(d) { return d.y2; }) .attr("stroke", function (d) { return (dx > 50) ? 'red' : 'blue'; }) .attr("fill", "none") .attr("stroke-width", 2);
我认为你可以通过为线条定义渐变而不是样式化来实现这一点。 在这里查看此解决方案。 根据数据改变折线图的颜色（红色代表0以上的阈值，蓝色代表0以下）
我昨天问了一个非常类似的问题，并且能够通过阅读D3文档并查看一些像这样的样本来使其工作https://bl.ocks.org/mbostock/3970883
svg.append("linearGradient") .attr("id", "line-gradient") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0).attr("y1", y(0)) .attr("x2", 0).attr("y2", y(2)) .selectAll("stop") .data( [ {offset: "100%", color: "blue"}, {offset: "100%", color: "red"}, ] ) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; });