Question

我是使用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);
}

Answer 1

现在您的线路生成器...

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

此外，请使用datum，而不要使用data：

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

Answer 2

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

.attr("d", trendline);

使用

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

它应该工作

使用d3.js的趋势线未显示在时间序列图上

2 个答案: