更新:这是问题的示例 - http://jsfiddle.net/Hffks/2/
我正在尝试使用 D3 编写折线图,并且我的线在最后闭合,这意味着它充当闭合路径,其中第一个点和最后一个点相同。我的数据采用以下 JSON 格式:
[ entityA : [ { time : 1230000, // time since epoch
attribute1 : 123 // numeric value
attribute2 : 123 // numeric value
},
{ time : 1230010, // time since epoch
attribute1 : 123 // numeric value
attribute2 : 123 // numeric value
} ],
entityB : [ { ... // same format as above
...
]
我正在使用一条线的标准声明(d3.svg.line,带有 x 和 y 的函数):
var line = d3.svg.line()
.x(function(d) {
return x_scale(d.c_date));
})
.y(function(d) {
return y_scale(d.total);
});
然后在迭代实体的 for 循环中,我附加一个“svg:path”:
canvas.append("svg:path")
.attr("d", line(data[entity]))
图表的其他所有内容都有效:点放置正确,每个实体有多条独立的线,绘制轴等。但是,每条独立的线都充当闭合路径。
提前感谢您的帮助!
我的代码是这样的:
var width = 400;
var height = 400;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
//The data for our line
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
}
];
//The line SVG Path we draw
var lineGraph = svg.append("path")
.attr("d", d3.line()
.x(d => d.x)
.y(d => d.y)
.curve(d3.curveLinear)(lineData))
//.curve(d3.curveBasis)(lineData)) //Draws smooth joints- yumuşak birleşim noktası(mafsal) çizer
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
您可以在此处查看 d3 版本 5.9.2:https://jsfiddle.net/jsfiddleCem/u31omp5z/8/
同样的问题,但没有一个答案对我有用