Javascript 使用d3.js时，趋势线未出现在时间序列图上

我不熟悉使用d3.js，我正在尝试用趋势线绘制一个timeseries图。轴显示正确，但我不确定为什么趋势线没有出现。我应该在代码中更改什么以显示趋势线？我使用的是D3V4

//create function to parse the date
var parseDate = d3.timeParse("%m/%d/%Y");

//open the dataset

d3.csv("filename.csv", function(error, data) {
data.forEach(function(d){
    //parse the date
    d.date = parseDate(d.date);
    d.value = +d.value
})
visualize(data)
});


//set up SVG
var width = 1500;
var height = 800;
var padding = 30;


function visualize(dataset) {
//set ranges
var xScale = d3.scaleTime().range([padding,width-padding]);
var yScale = d3.scaleLinear().range([height-padding,padding]);

//define line
var trendline = d3.line()
                    .x(function(d) {return d.date})
                    .y(function(d) {return d.value});

//create svg element
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g")
.attr("transform", "translate(" + padding + "," + padding + ")");

//scale the range of the data
xScale.domain(d3.extent(dataset, function(d) {return d.date}))
yScale.domain([0,d3.max(dataset, function(d) {return d.value;})])


g.append("g")
    .attr("transform","translate("+ padding +"," + (height-padding*2) + ")")
    .call(d3.axisBottom(xScale).ticks(10));

g.append("g")
    .attr("transform","translate("+padding*2+",0)")
    .call(d3.axisLeft(yScale));

g.append("path")
    .data(dataset)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", trendline);
}

---

现在你的线路生成器

var trendline = d3.line()
    .x(function(d) {return d.date})
    .y(function(d) {return d.value});

。。。按原样使用数据集中的值。这显然是错误的，因为您有

x

值的日期（根据您的刻度）

解决方案很简单，只需在测线生成器中使用刻度：

var trendline = d3.line()
    .x(function(d) {return xScale(d.date)})
    .y(function(d) {return yScale(d.value)});

此外，请使用

数据

，而不是

数据

：

g.append("path")
    .datum(dataset)
    //etc...

---

现在你的线路生成器

var trendline = d3.line()
    .x(function(d) {return d.date})
    .y(function(d) {return d.value});

。。。按原样使用数据集中的值。这显然是错误的，因为您有

x

值的日期（根据您的刻度）

解决方案很简单，只需在测线生成器中使用刻度：

var trendline = d3.line()
    .x(function(d) {return xScale(d.date)})
    .y(function(d) {return yScale(d.value)});

此外，请使用

数据

，而不是

数据

：

g.append("path")
    .datum(dataset)
    //etc...

---

在应用@Geredo的建议之后 换行

.attr("d", trendline);

与

---

在应用@Geredo的建议后，它应该会起作用 换行

.attr("d", trendline);

与

---

它应该可以工作

您是否尝试使用d3.svg.line（）而不是d3.line（）？当我尝试时，我得到以下错误：TypeError:d3.svg未定义。我认为d3.svg.line（）适用于不同版本的d3。我没有您拥有的csv文件，因此无法运行此代码，但我认为您的代码应该可以正常运行，您需要调整宽度、高度和填充，因为这些是定义行的主要属性。您是否尝试使用d3.svg.line（）而不是d3.line（）？当我尝试这样做时，会出现以下错误：TypeError:d3.svg未定义。我认为d3.svg.line（）适用于不同版本的d3。我没有您拥有的csv文件，因此我无法运行此代码，但我认为您的代码应该可以正常运行，您需要调整宽度、高度和填充，因为这些是定义行的主要属性。我尝试了，但似乎没有效果。我仍然得到同样的结果，我试过了，但似乎不起作用。我仍然得到相同的输出