如果 X > 100,我想更改此折线图的颜色 我希望它变成“红色”
有没有一种方法可以根据 X 的值在笔触颜色样式中使用条件?
http://jsfiddle.net/iamjeannie/b445svob/1/ enter link description here
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 d.x; })
.y(function(d) { return d.y; })
.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 d.x <= 100;
})))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
var lineGraph2 = svgContainer.append("path")
.attr("d", lineFunction(lineData.filter(function(d) {
return d.x >= 100;
})))
.attr("stroke", "red")
.attr("stroke-width", 2)
.attr("fill", "none");
关于javascript - 如何根据轴值更改 d3js 中的线条颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27026625/