我画了一个折线图，线下的区域看起来是彩色的，使它看起来像一个面积图。代码如下所示
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font: 12px Arial;
}
path {
stroke-width: 1;
stroke : 1;
}
.axis path,.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<script type="text/javascript" src="d3.min.js"></script>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var baseSvg = d3.select("body")
.append("svg")
.attr("height",800)
.attr("width",800)
.append("g")
.attr("transform","translate(50,50)");
$.ajax({
method : 'GET',
url:"URL", //Called my URL here
success:function(data){
var res = data.d.results;
/* res.forEach(function(d){
console.log(new Date(parseInt(d.DATE_SQL.substring(6))));
}) */
buildTrend(res);
}
}) ;
function buildTrend(res) {
var x = d3.time.scale().range([ 50, 700 ]);
var y = d3.scale.linear().range([ 500, 0 ]);
res.forEach(function(d){
d.DATE_SQL = new Date(parseInt(d.DATE_SQL.substring(6)));
});
var line = d3.svg.line().interpolate("basis").x(function(d) {
return x(d.DATE_SQL)
}).y(function(d) {
return y(d.M_COUNT)
});
x.domain(d3.extent(res, function(d) {
return d.DATE_SQL;
}));
y.domain([0,d3.max(res, function(d) {
return d.M_COUNT;
})]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(15);
baseSvg.append("g")
.attr("class", "x axis").attr("transform",
"translate(0," + 500 + ")").call(xAxis)
.selectAll("text").attr("transform",function(d){ return "rotate(-90)"})
.attr("dx", "-.8em").attr("dy", ".15em").style("text-anchor", "end");
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(8);
baseSvg.append("g")
.attr("transform","translate(50,0)")// Add the Y Axis
.attr("class", "y axis").call(yAxis);
baseSvg.append("g")
.attr("transform","translate(0,10)")
.append("path")
.attr("d",line(res))
.attr("stroke","blue");
}
</script>
</body>
</html>
但是结果是这样的
我检查了所有代码以搜索“黑色”以确定颜色的可能原因，但我没有找到任何原因。也许它是默认颜色。无法找出原因。
谢谢， 维拉
最佳答案
尝试将此 css 添加到您的行中:
path line {
fill: none;
stroke: #000;
}
我过去曾遇到过这种情况，如果我没记错的话，发生的事情是 d3 认为线上的第一个点和最后一个点连接在一起，因此将其设为一个区域并默认填充它黑色。
如果您将填充设置为无并添加描边，应该可以解决此问题。
希望这对您有所帮助。
关于javascript - D3 折线图显示为面积图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24645826/