在d3中创建折线图

Question

我正在尝试使用嵌套和汇总在 d3 中创建折线图，以显示多年预算值的总和。 我已经用尽了所有教程和 StackOverflow 答案，无论我尝试什么，我似乎都无法显示该行。

我附上了下面的代码，如果有人能提供帮助，我将不胜感激。

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

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

var parseDate = string => d3.utcParse('%Y-%m-%d')(string);
var parseNA = string => (string === 'NA' ? undefined : string);

// 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("data/movies.csv",
function (d) 
{
  const date = parseDate(d.release_date);

  return {
    budget: +d.budget,
    genre: parseNA(d.genre),
    genres: JSON.parse(d.genres).map(d => d.name),
    homepage: parseNA(d.homepage),
    id: +d.id,
    imdb_id: parseNA(d.imdb_id),
    original_language: parseNA(d.original_language),
    overview: parseNA(d.overview),
    popularity: +d.popularity,
    poster_path: parseNA(d.poster_path),
    production_countries: JSON.parse(d.production_countries),
    release_date: date,
    release_year: date.getFullYear(),
    revenue: +d.revenue,
    runtime: +d.runtime,
    tagline: parseNA(d.tagline),
    title: parseNA(d.title),
    vote_average: +d.vote_average,
    vote_count: +d.vote_count,
  };
}, function(error, data)
 {
  if (error) throw error;

  // format the data
  data.forEach(function(d) 
  {
      d.release_date = parseDate(d.release_year);
      d.budget = +d.budget;
  });

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

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

 var y = d3.scaleLinear().range([height, 0]);

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

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

  // Scale the range of the data
  console.log(y.domain(), x.domain(), dataNest)
  // Add the valueline path.
  svg.append("path")
      .datum(dataNest)
      .attr("class", "line")
      .attr('d', valueline)
      .attr("fill", "none")
      .attr("stroke", "steelblue")      

  // 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文件看下面

budget      genre     release_date  revenue
311541291   Adventure   2007-05-19  997970603
287364367   Adventure   2006-06-28  416232589
267925511   Fantasy     2007-05-01  925144323
250694215   Adventure   2009-07-07  936552673
237000000   Action      2009-12-10  2787965087
234854812   Action      2003-07-02  510809217
227674222   Action      2004-06-25  892216961
227141479   Adventure   2005-12-14  603516006
224290617   Adventure   2008-05-15  418328331
223947111   Adventure   2006-05-24  489867835
212862494   Adventure   2006-06-20  1134195026
201957392   Action      2009-05-20  374987418
199847039   Adventure   2004-05-13  568033634
199789062   Action      2009-10-10  768841848
199647760   Animation   2009-11-04  324661062
199423751   Adventure   2008-10-30  584402056
197514329   Adventure   2005-12-07  821667244
186552801   Adventure   2004-11-10  345830147
185067417   Adventure   2007-12-04  382714138
184416730   Adventure   2008-05-21  784155917
182717292   Horror      2004-05-05  342888955
181623197   Drama       2008-07-16  986222252
181380908   Fantasy     2007-06-09  179307984
177665614   Animation   2009-03-19  387321058
177642392   Animation   2008-06-22  514483810
176712718   Animation   2009-05-13  742293467
176525068   Adventure   2003-05-15  869209084
175568293   Adventure   2003-11-05  497429697
175568293   Adventure   2003-11-14  248149525
175246571   War         2004-11-21  189151190
175093243   Adventure   2009-08-04  302630178
171297462   Adventure   2004-05-19  1050440296
170626370   Adventure   2006-05-12  193740716
170134271   History     2001-05-21  545913415
167867074   Action      2002-07-03  529763069
166946112   Fantasy     2002-05-01  986914015
166755985   Adventure   2002-11-26  130520046
166755985   Adventure   2002-11-17  514526920
166676130   Adventure   2001-07-02  103572583
166556410   Western     2004-04-07  29658483
166541645   Action      2005-06-10  415486623
166155355   Fantasy     2007-05-17  829694862
165774565   Adventure   2005-07-13  524918267
164398369   Adventure   2003-07-09  769162691
164041563   Drama       2003-12-05  535196121
163928897   Adventure   2005-11-05  979115647
163928897   Animation   2005-11-04  343630666
161050697   Drama       2003-06-19  288434133
160756079   Adventure   2006-11-14  642001866
159962222   Adventure   2006-05-03  424273147
159446982   Adventure   2006-10-22  68978815
158869469   Adventure   2004-12-16  237252993
157740611   Animation   2007-03-23  178071250
155469350   Adventure   2007-06-28  972422163
155469350   Animation   2007-06-22  646465207
155469350   Adventure   2007-06-27  735587454
155034795   Family      2007-10-28  297247776
154222848   Drama       2007-12-14  601827941
152655628   Adventure   2003-07-18  320975551
152565922   Family      2000-11-17  428104198
152488408   Fantasy     2008-11-24  339471811
152488408   Animation   2008-11-21  315122371
152162486   Adventure   2001-11-16  1188663577
151905599   Adventure   2009-04-28  377802253
151468044   Thriller    2009-05-13  360103600
151468044   Adventure   2009-05-20  417149223

Answer 1

您的数据是嵌套的。 您需要在值上调用您的线路 function：

svg.selectAll('path.line')
  .data(dataNest)
  .enter()
  .append('path')
  .attr("class", "line")
  .attr('d', d =>  valueline(d.values))
  .attr("fill", "none")
  .attr("stroke", "steelblue")