使用嵌套和彙總來創建一個平均值在d3 v4的折線圖

Question

我正在使用嵌套和彙總在d3 v4中創建折線圖以顯示多天的平均分數。我已經用盡所有的教程和stackoverflow的答案，無論我嘗試，我似乎無法得到顯示行。

我附上了下面的代碼，如果有人可以幫忙，我將非常感激。

// set the dimensions and margins of the graph 
 
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 400 - margin.top - margin.bottom; 
 

 
// parse the date/time 
 
var parseTime = d3.timeParse("%d/%m"); 
 

 
// append the svg object to the body of the page 
 
// appends a 'group' element to 'svg' 
 
// moves the 'group' element to the top left margin 
 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", 
 
      "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// Get the data 
 
d3.csv("csv/formdata.csv", function(error, data) { 
 
    if (error) throw error; 
 

 
    // format the data 
 
    data.forEach(function(d) { 
 
     d.date = parseTime(d.date); 
 
     d.scale = +d.scale; 
 
    }); 
 

 
var dataNest = d3.nest() 
 
.key(function(d) {return d.date;}) 
 
.rollup (function(v) { return { 
 
    averagescale: d3.mean(v, function(d) {return d.scale; }) 
 
}; }) 
 
.entries(data) 
 

 
console.log(dataNest) 
 

 
// set the ranges 
 
var x = d3.scaleTime().range([0, width]); 
 
var y = d3.scaleLinear().range([height, 0]); 
 

 
// define the line 
 
var valueline = d3.line() 
 
    .x(function(d) { return x(d.date); }) 
 
    .y(function(d) { return y(d.averagescale); }); 
 

 
    // Scale the range of the data 
 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
 
    y.domain([0, d3.max(dataNest, function(d) { return d.averagescale; })]); 
 

 
    // Add the valueline path. 
 
    svg.append("path") 
 
     .data(dataNest) 
 
     .attr("class", "line") 
 
     .attr('d', function(d) { return valueline (d.averagescale); }) 
 

 
    // Add the X Axis 
 
    svg.append("g") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(d3.axisBottom(x)); 
 

 
    // Add the Y Axis 
 
    svg.append("g") 
 
     .call(d3.axisLeft(y)); 
 

 
});

CSV看起來如下

date,grade,scale 
 
10/05,vs,7 
 
10/05,vs,2 
 
11/05,vs,3 
 
11/05,vs,6 
 
12/05,vs,8 
 
12/05,vs,2 
 
13/05,vs,3 
 
13/05,vs,6

Answer 1

問題：既然你滾up.value將舉行averagescale。

y.domain([0, d3.max(dataNest, function(d) { return d.averagescale; })]); 

它應該是：

y.domain([0, d3.max(dataNest, function(d) { return d.value.averagescale; })]); 

隨後線功能也需要改變：

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

它應該是：

var valueline = d3.line() 
    .x(function(d) { return x(new Date(d.key)); }) 
    .y(function(d) { return y(d.value.averagescale); }); 

工作代碼here