我试图用d3创建一个简单的线图,但是由于某种原因,它在线和一些中点之间填充.以下是输出：
我的javascript如下：
var width = 500,height = 500,padding = 10;
var extentVisits = d3.extent(visits,function(obj){
return obj['visits'];
});
var extentDates = d3.extent(visits,function(obj){
return obj['datestamp'];
});
var yScale = d3.scale.linear()
.domain(extentVisits)
.range([height - padding,padding]);
var xScale = d3.time.scale()
.domain(extentDates)
.range([0,width]);
var line = d3.svg.line()
.x(function(d) {
return xScale(d['datestamp']);
})
.y(function(d) {
return yScale(d['visits']);
})
d3.select('#chart')
.append('svg')
.attr('width',width)
.attr('height',height)
.append("g")
.attr("transform","translate(5,5)")
.append('path')
.datum(visits)
.attr("class","line")
.attr('d',line);
访问的形式如下：
visits = [{'datestamp': timestampA,'visits': 1000},{'datestamp': timestampB,'visits': 1500}]
我在d3很新,所以我确信这很简单,但是这让我很疯狂.
提前致谢.
解决方法
你看到的中点只是第一个和最后一个点的连接.这是因为您创建的路径(默认情况下)为黑色填充.即使它是一个开放的路径(即,第一个和最后一个点实际上没有连接),如果被填充,它将显示为关闭：
The fill operation fills open subpaths by performing the fill operation as if an additional “closepath” command were added to the path to connect the last point of the subpath with the first point of the subpath.
资料来源：SVG specification via this SO answer
这里的解决方案是消除填充,而是设置笔画.您可以直接在JS中使用d3或通过CSS.
path.line
{
fill: none;
stroke: #000;
}
Demo showing both the CSS and JS method (commented out) on jsFiddle
