D3.js屏幕上不显示折线图

Question

D3.js 窗口中未显示折线图

嗨，我对 javascript 相当陌生，通过几个例子，我模拟了 d3.js 折线图的实现。出于某种原因，它没有在窗口上绘制图形，而是给我一个空白屏幕。

var chartdata = [{
time: "1-May-12",
emissionrate: "58.13"
}, {
time: "30-Apr-12",
emissionrate: "53.98"
}, {
time: "27-Apr-12",
emissionrate: "67.00"
}, {
time: "26-Apr-12",
emissionrate: "89.70"
}, {
time: "25-Apr-12",
emissionrate: "99.00"
}];
//regular single compound chart
function chart (width,height,data) {
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},vis = d3.select('#chartvis');
var w = width - margin.left - margin.right;
var h = height - margin.top - margin.bottom;

var parseDate = d3.timeParse("%d-%b-%y");
data.forEach(function (d){
d.time=parseDate(d.time);
d.emissionrate=+d.emissionrate;
});
var xmin = d3.min(data,function(d){
return d.time;
});
console.log(xmin);
var xmax = d3.max(data,function(d){
return d.time;
});
var ymax = d3.max(data,function(d){
return d.emissionrate;
});
console.log(ymax);
var xLine =  d3.scaleTime().domain([xmin, xmax]).range([0, w]);
var yLine = d3.scaleLinear().domain([0, ymax]).range([h, 0]);
var lineFunc =  d3.line()
.x(function(d) {
return xLine(d.time);
})
.y(function (d) {
return yLine(d.emissionrate);
});
vis.append('g')
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.attr("transform",
"translate(" + margin.left + "," + margin.top +     ")");
vis.append('g')
.attr("id", "xAxis")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(xLine));
vis.append('g')
.attr("id", "yAxis")
.attr("transform", "translate(" + w + ", 0)")
.call(d3.axisLeft(yLine));
vis.append("path")
.data(data)
.style("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width","1.5")
.attr("d", lineFunc);

}
chart(400,500,chartdata);

我希望任何类型的图形输出，但得到一个空白屏幕。在开发工具中进行检查也不会给我任何错误。 我也在这里附上了 JsFiddle

https://jsfiddle.net/Lwbogd94/2/

Answer 1

有两个主要问题。首先，使用 d3v5 时，jsfiddle 上似乎有一个错误。我决定使用普通 js 并使用脚本标签加载 d3v5。之后，我开始使用浏览器工具时看到<svg>内的元素。我不得不调整<svg>元素的大小才能看到轴。 第二个主要问题是data函数适用于进入-更新-退出模式。在您的情况下，您应该使用基准方法。

这是更新的jsfiddle： https://jsfiddle.net/75uh2La0/