javascript - 多折线图不适用于日期格式

Question

我正在尝试在 D3 中绘制多折线图。我在运行相同的程序时遇到问题，并且没有绘制图表。我尝试了多种解决方案，但无法破解。

我发现问题出在 line 函数中，它返回了 NaN。

我遇到的错误是:

attribute d: Expected number, "MNaN,293.27586206…".

这是我的代码:

//user defined data
var data = [
{Date: "2017-01-01", "New York": 63.4, "San Francisco": 62.7, "Austin": 72.2},
{Date: "2017-02-01", "New York": 58, "San Francisco": 59.9, "Austin": 67.7},
{Date: "2017-03-01", "New York": 53.3, "San Francisco": 59.1, "Austin": 69.4},
{Date: "2017-04-01", "New York": 55.7, "San Francisco": 58.8, "Austin": 68},
{Date: "2017-05-01", "New York": 64.2, "San Francisco": 58.7, "Austin": 72.4},
{Date: "2017-06-01", "New York": 58.8, "San Francisco": 57, "Austin": 77},
{Date: "2017-07-01", "New York": 57.9, "San Francisco": 56.7, "Austin": 82.3},
{Date: "2017-08-01", "New York": 61.8, "San Francisco": 56.8, "Austin": 78.9},
{Date: "2017-09-01", "New York": 69.3, "San Francisco": 56.7, "Austin": 68.8},
{Date: "2017-10-01", "New York": 71.2, "San Francisco": 60.1, "Austin": 68.7},
{Date: "2017-11-01", "New York": 68.7, "San Francisco": 61.1, "Austin": 70.3},
{Date: "2017-12-01", "New York": 61.8, "San Francisco": 61.5, "Austin": 75.3},
];
var columns = ["Date", "New York", "San Francisco", "Austin"]


var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y-%m-%d");
data.forEach(function(d){
d.Date = parseTime(d.Date)
   });
var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);
var convertToDate = function (mon){
   return new Date(Date.parse(mon +" 1, 2012"))
}
var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { debugger
	return x(d.Date); })
    .y(function(d) { return y(d.temperature); });
	
/* chetan*/
function make_x_axis() {        
		return d3.axisBottom()
			.scale(x)
			.ticks(12)
	}

	function make_y_axis() {        
		return d3.axisLeft()
			.scale(y)
			.ticks(12)
	}
//d3.tsv("data.tsv", type, function(error, data) {
  //if (error) throw error;
	
  var cities = columns.slice(1).map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
	    return {Date: d.Date, temperature: d[id]};
      })
    };
  });
  
  x.domain(d3.extent(data, function(d) { return d.Date; }));
  y.domain([
    d3.min(cities, function(c) { 
	return d3.min(c.values, function(d) { return d.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(d) { 
	return d.temperature; }); })
  ]);

  z.domain(cities.map(function(c) { return c.id; }));

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
 var city = g.selectAll(".city")
    .data(cities)
    .enter().append("g")
      .attr("class", "city");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { 
	  return z(d.id); });

 /* city.append("text")
      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .text(function(d) { return d.id; });
	  */
	  // add grid lines
svg.append("g")         
        .attr("class", "grid")
        .attr("transform", "translate(50," + (height+20) + ")")
        .call(make_x_axis()
            .tickSize(-height, 0, 0)
            .tickFormat("")
        )

   /* svg.append("g")         
        .attr("class", "grid")
        .call(make_y_axis()
            .tickSize(-width, 0, 0)
            .tickFormat("")
        ) */
	  
	  
//});

function type(d, _, columns) {
  d.date = parseTime(d.date);
  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
  return d;
}

/*.axis--x path {
  display: none;
}*/

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}/*
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}
*/

<script src="//d3js.org/d3.v4.min.js"></script>
<body>
<svg width="960" height="500"></svg>
</body>

Answer 1

您正在线生成器中使用日期对象...

var line = d3.line()
    .x(function(d) {
        return x(new Date(d.Date)); 
})

...但不在比例范围内:

x.domain(d3.extent(data, function(d) { 
    return d.Date; 
}));

因此，应该是:

x.domain(d3.extent(data, function(d) { 
    return new Date(d.Date); 
}));

这里是你的代码有那个变化:

var data = [{
  Date: "2017-01-01",
  "New York": 63.4,
  "San Francisco": 62.7,
  "Austin": 72.2
}, {
  Date: "2017-02-01",
  "New York": 58,
  "San Francisco": 59.9,
  "Austin": 67.7
}, {
  Date: "2017-03-01",
  "New York": 53.3,
  "San Francisco": 59.1,
  "Austin": 69.4
}, {
  Date: "2017-04-01",
  "New York": 55.7,
  "San Francisco": 58.8,
  "Austin": 68
}, {
  Date: "2017-05-01",
  "New York": 64.2,
  "San Francisco": 58.7,
  "Austin": 72.4
}, {
  Date: "2017-06-01",
  "New York": 58.8,
  "San Francisco": 57,
  "Austin": 77
}, {
  Date: "2017-07-01",
  "New York": 57.9,
  "San Francisco": 56.7,
  "Austin": 82.3
}, {
  Date: "2017-08-01",
  "New York": 61.8,
  "San Francisco": 56.8,
  "Austin": 78.9
}, {
  Date: "2017-09-01",
  "New York": 69.3,
  "San Francisco": 56.7,
  "Austin": 68.8
}, {
  Date: "2017-10-01",
  "New York": 71.2,
  "San Francisco": 60.1,
  "Austin": 68.7
}, {
  Date: "2017-11-01",
  "New York": 68.7,
  "San Francisco": 61.1,
  "Austin": 70.3
}, {
  Date: "2017-12-01",
  "New York": 61.8,
  "San Francisco": 61.5,
  "Austin": 75.3
}, ];
var columns = ["Date", "New York", "San Francisco", "Austin"]


var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 80,
    bottom: 30,
    left: 50
  },
  width = svg.attr("width") - margin.left - margin.right,
  height = svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y-%m-%d");

var x = d3.scaleTime().range([0, width]),
  y = d3.scaleLinear().range([height, 0]),
  z = d3.scaleOrdinal(d3.schemeCategory10);
var convertToDate = function(mon) {
  return new Date(Date.parse(mon + " 1, 2012"))
}
var line = d3.line()
  .curve(d3.curveBasis)
  .x(function(d) {
    return x(new Date(d.Date));
  })
  .y(function(d) {
    return y(d.temperature);
  });

/* chetan*/
function make_x_axis() {
  return d3.axisBottom()
    .scale(x)
    .ticks(12)
}

function make_y_axis() {
  return d3.axisLeft()
    .scale(y)
    .ticks(12)
}
//d3.tsv("data.tsv", type, function(error, data) {
//if (error) throw error;

var cities = columns.slice(1).map(function(id) {
  return {
    id: id,
    values: data.map(function(d) {
      return {
        Date: d.Date,
        temperature: d[id]
      };
    })
  };
});

x.domain(d3.extent(data, function(d) {
  return new Date(d.Date);
}));
y.domain([
  d3.min(cities, function(c) {
    return d3.min(c.values, function(d) {
      return d.temperature;
    });
  }),
  d3.max(cities, function(c) {
    return d3.max(c.values, function(d) {
      return d.temperature;
    });
  })
]);

z.domain(cities.map(function(c) {
  return c.id;
}));

g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(y))
var city = g.selectAll(".city")
  .data(cities)
  .enter().append("g")
  .attr("class", "city");

city.append("path")
  .attr("class", "line")
  .attr("d", function(d) {
    return line(d.values);
  })
  .style("stroke", function(d) {
    return z(d.id);
  })
  .style("fill", "none");

/* city.append("text")
      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .text(function(d) { return d.id; });
	  */
// add grid lines
svg.append("g")
  .attr("class", "grid")
  .attr("transform", "translate(50," + (height + 20) + ")")
  .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat("")
  )

/* svg.append("g")         
     .attr("class", "grid")
     .call(make_y_axis()
         .tickSize(-width, 0, 0)
         .tickFormat("")
     ) */


//});

function type(d, _, columns) {
  d.date = parseTime(d.date);
  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
  return d;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

PS:然而，最佳做法是更改数据本身:

data.forEach(function(d){
    d.Date = parseTime(d.Date)
});

那样的话，您只需为线生成器、比例、属性等传递 d.Date。

另外，您应该遵循 JavaScript 命名约定:使用 date 而不是 Date。