D3 折线图显示为面积图
Posted
技术标签:
【中文标题】D3 折线图显示为面积图【英文标题】：D3 line graph appearing as area graph 【发布时间】：2014-08-30 00:22:00 【问题描述】：我已经绘制了一个折线图，并且该线下方的区域似乎被着色以使其看起来像一个区域图。代码如下所示
<!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 规则未应用于通行证。尝试将它们放在一个类中并在您的append("path") 中添加.attr("class", "yourclassname") - 或者只是尝试添加.attr("fill","none")there。
【参考方案1】：
尝试将此 css 添加到您的行中：
path line
fill: none;
stroke: #000;
我过去也遇到过这种情况，如果我没记错的话，d3 认为线上的第一个点和最后一个点是连接的，因此将其设为一个区域并默认填充它颜色为黑色。
如果您将填充设置为无并添加笔触，它应该可以解决此问题。
希望这会有所帮助。
【讨论】：
这条线的 css 已经将填充设置为 none 并设置了描边，但仍然无法正常工作。我看到这种行为更像是区域而不是路径。不确定出了什么问题！ 尝试将此 CSS 放入路径行 或者在创建 svg 路径元素时添加 .append("fill", "none");以上是关于D3 折线图显示为面积图的主要内容，如果未能解决你的问题，请参考以下文章