如果数据值高于某个值，是否可以更改线条的颜色？
我得到了我喜欢的线图，但我不知道如何做出造型，任何想法？
https://codepen.io/anon/pen/Xgebqe
var m = [10, 10, 10, 10]; // margins
var w = 400; // width
var h = 200; // height
var data=[146.45,146.43,146.45,146.47,146.44,146.48,146.44,146.52,146.59,146.71,146.74,146.68,146.66,146.64,146.65,146.68,146.58,146.57,146.54,146.5,146.45,146.51,146.57,146.6,146.62,146.63,146.51,146.44,146.36,146.33,146.34,146.3,146.34,146.33,146.35,146.31,146.4,146.44,146.44,146.44,146.47,146.37,146.41,146.4,146.44,146.5,146.51,146.54,146.54,146.5,146.49,146.45,146.45,146.47,146.46,146.47,146.45,146.59,146.71,146.71,146.7,146.68,146.74,146.77,146.78,146.71,146.73,146.72,146.71,146.73,146.73,146.73,146.75,146.72,146.66,146.65,146.72,146.75,146.77,146.8,146.82,146.83,146.84,146.85,146.86,146.9,146.91,146.9,146.86,146.89,146.89,146.89,146.88,146.91,146.89,146.89,146.9,146.91,146.95,146.95,146.93,146.95,147,146.98,147,147.01,147.03,147.05,147.07,147.08,147.07,147.04,147.02,146.99,146.98,146.98,147,147,147.02,147.04,147.06,147.06,147.12,147.13,147.13,147.15,147.16,147.12,147.07,147.06,147.03,147.03,147.02,147.02,147.06,147.07,147.07,147,147,146.99,147,146.91,146.91,146.87,146.87,146.86,146.88,146.87,146.85,146.87,146.89,146.91,146.88,146.84,146.87,146.88,146.89,146.9,146.92,146.94,146.94,146.92,146.9,146.87,146.84,146.8,146.78,146.8,146.78,146.72,146.73,146.75,146.76,146.77,146.78,146.77,146.76,146.85,146.9,146.9,146.92,146.97,146.96,146.97,146.96,146.89,146.91,146.89,146.91,146.93,146.96,146.97,147.03,147.02,146.98,146.99,147,146.99,147,147,147,146.97,146.96,146.97,146.99,146.99,146.98,146.95,146.95,146.93,146.9,146.88,146.85,146.87,146.84,146.85,146.87,146.87,146.84,146.81,146.82,146.82,146.8,146.76,146.74,146.67,146.66,146.66,146.68,146.63,146.69,146.72,146.77,146.79,146.85,146.85,146.8,146.77,146.72,146.86,146.86,146.86,146.91,146.86,146.78,146.71,146.67,146.65,146.63,146.58,146.55,146.5,146.48,146.44,146.37,146.4,146.39,146.36,146.34,146.35,146.4,146.33,146.34,146.32,146.34,146.35,146.33,146.34,146.3,146.35,146.37,146.33,146.33,146.33,146.33,146.26,146.28,146.23,146.25,146.27,146.29,146.27,146.29,146.27,146.22,146.21,146.27,146.31,146.32,146.34,146.33,146.39,146.38,146.33,146.3,146.3,146.23,146.19,146.17,146.16,146.15,146.19,146.22,146.21,146.24,146.3,146.29,146.27,146.23,146.21,146.15,146.13,146.13,146.13,146.12,146.12,146.15,146.08,146.07,146.04,145.97,145.91,145.91,145.94,145.95,145.94,145.92,145.89,145.84,145.85,145.72,145.72,145.74,145.77,145.77,145.72,145.67,145.65,145.6,145.55,145.52,145.59,145.6,145.63,145.67,145.71,145.71,145.75,145.74,145.73,145.75,145.73,145.78,145.75,145.75,145.77,145.78,145.78,145.83,145.82,145.84,145.84,145.74,145.66,145.69,145.71,145.66,145.66,145.7,145.67,145.73,145.72,145.66,145.49,145.54,145.61,145.65,145.81,145.81,145.87,145.89,145.91,145.79,145.74,145.66,145.78,145.75,145.69,145.88,145.39];
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
var y = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([h, 0]);
var line = d3.svg.line()
.x(function(d,i) {
return x(i);
})
.y(function(d) {
return y(d);
})
var graph = d3.select("#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
graph.append("svg:path").attr("d", line(data));path {
stroke: steelblue;
stroke-width: 1.5;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: url(#line-gradient);
stroke-width: 2px;
}<script src="https://d3js.org/d3.v2.js"></script>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>
答案 0 :(得分：0)
简短的回答是不，这是不可能的。在像你这样的折线图中，＆＃34;线＆＃34;实际上是一个<path>元素，这意味着它只有一个笔触颜色，只有一个笔触宽度，只有一个填充等...
针对您的问题的经典SVG解决方案是使用clipping and masking。我确定有人会很快发布一个答案。
但是，我想提出一个基于D3的解决方案（或者你想要的基于数据的解决方案），虽然这不是一个完美的解决方案。
我的解决方案是附加两个不同的路径，过滤每个路径的数据。在您的情况下，我会针对每条路径过滤146.5上方和下方的数据：
graph.append("svg:path").attr("d", line(data.map(function(d) {
return d < 146.5 ? d : null
}))).attr("stroke", "blue");
graph.append("svg:path").attr("d", line(data.map(function(d) {
return d >= 146.5 ? d : null
}))).attr("stroke", "red");
对于每条路径，我都会将null值传递给超出（或低于）限制的值，并在线路生成器中使用 line.defined 。
以下是演示：
var m = [10, 10, 10, 10]; // margins
var w = 400; // width
var h = 200; // height
var data=[146.45,146.43,146.45,146.47,146.44,146.48,146.44,146.52,146.59,146.71,146.74,146.68,146.66,146.64,146.65,146.68,146.58,146.57,146.54,146.5,146.45,146.51,146.57,146.6,146.62,146.63,146.51,146.44,146.36,146.33,146.34,146.3,146.34,146.33,146.35,146.31,146.4,146.44,146.44,146.44,146.47,146.37,146.41,146.4,146.44,146.5,146.51,146.54,146.54,146.5,146.49,146.45,146.45,146.47,146.46,146.47,146.45,146.59,146.71,146.71,146.7,146.68,146.74,146.77,146.78,146.71,146.73,146.72,146.71,146.73,146.73,146.73,146.75,146.72,146.66,146.65,146.72,146.75,146.77,146.8,146.82,146.83,146.84,146.85,146.86,146.9,146.91,146.9,146.86,146.89,146.89,146.89,146.88,146.91,146.89,146.89,146.9,146.91,146.95,146.95,146.93,146.95,147,146.98,147,147.01,147.03,147.05,147.07,147.08,147.07,147.04,147.02,146.99,146.98,146.98,147,147,147.02,147.04,147.06,147.06,147.12,147.13,147.13,147.15,147.16,147.12,147.07,147.06,147.03,147.03,147.02,147.02,147.06,147.07,147.07,147,147,146.99,147,146.91,146.91,146.87,146.87,146.86,146.88,146.87,146.85,146.87,146.89,146.91,146.88,146.84,146.87,146.88,146.89,146.9,146.92,146.94,146.94,146.92,146.9,146.87,146.84,146.8,146.78,146.8,146.78,146.72,146.73,146.75,146.76,146.77,146.78,146.77,146.76,146.85,146.9,146.9,146.92,146.97,146.96,146.97,146.96,146.89,146.91,146.89,146.91,146.93,146.96,146.97,147.03,147.02,146.98,146.99,147,146.99,147,147,147,146.97,146.96,146.97,146.99,146.99,146.98,146.95,146.95,146.93,146.9,146.88,146.85,146.87,146.84,146.85,146.87,146.87,146.84,146.81,146.82,146.82,146.8,146.76,146.74,146.67,146.66,146.66,146.68,146.63,146.69,146.72,146.77,146.79,146.85,146.85,146.8,146.77,146.72,146.86,146.86,146.86,146.91,146.86,146.78,146.71,146.67,146.65,146.63,146.58,146.55,146.5,146.48,146.44,146.37,146.4,146.39,146.36,146.34,146.35,146.4,146.33,146.34,146.32,146.34,146.35,146.33,146.34,146.3,146.35,146.37,146.33,146.33,146.33,146.33,146.26,146.28,146.23,146.25,146.27,146.29,146.27,146.29,146.27,146.22,146.21,146.27,146.31,146.32,146.34,146.33,146.39,146.38,146.33,146.3,146.3,146.23,146.19,146.17,146.16,146.15,146.19,146.22,146.21,146.24,146.3,146.29,146.27,146.23,146.21,146.15,146.13,146.13,146.13,146.12,146.12,146.15,146.08,146.07,146.04,145.97,145.91,145.91,145.94,145.95,145.94,145.92,145.89,145.84,145.85,145.72,145.72,145.74,145.77,145.77,145.72,145.67,145.65,145.6,145.55,145.52,145.59,145.6,145.63,145.67,145.71,145.71,145.75,145.74,145.73,145.75,145.73,145.78,145.75,145.75,145.77,145.78,145.78,145.83,145.82,145.84,145.84,145.74,145.66,145.69,145.71,145.66,145.66,145.7,145.67,145.73,145.72,145.66,145.49,145.54,145.61,145.65,145.81,145.81,145.87,145.89,145.91,145.79,145.74,145.66,145.78,145.75,145.69,145.88,145.39];
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
var y = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([h, 0]);
var line = d3.svg.line()
.x(function(d,i) {
return x(i);
})
.y(function(d) {
return y(d);
})
.defined(function(d) { return d; })
var graph = d3.select("#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
graph.append("svg:path").attr("d", line(data.map(function(d){
return d<146.6 ? d : null}))).attr("stroke", "blue");
graph.append("svg:path").attr("d", line(data.map(function(d){
return d>=146.5 ? d : null}))).attr("stroke", "red");path {
stroke-width: 1.5;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: url(#line-gradient);
stroke-width: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>
这个解决方案并不完美，因为正如你所看到的，我不得不引入一个hack来生成蓝线，否则你的行之间会有间隙（这是行的预期行为.defined ）。