时间戳

首页 > 解决方案 > 趋势线未出现在使用 d3.js 的时间序列图上

javascript - 趋势线未出现在使用 d3.js 的时间序列图上

问题描述

我是使用 d3.js 的新手，我正在尝试用趋势线绘制时间序列图。轴显示正确，但我不确定为什么趋势线没有出现。我应该在我的代码中进行哪些更改以使趋势线出现？我正在使用 d3 v4。

//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);
}

标签： javascriptd3.js

解决方案

应用@Geredo 的建议后，更改此行

.attr("d", trendline);

和

.attr("d",trendline(data));

它应该工作

推荐阅读