阿波罗的战车
您无法通过说来获得date和value评分，d.value.date因为这些值嵌套在另一个对象中。您可以展平这些对象以尝试获取域。离开这个例子，如果你代表你的结构是这样的：data = [ {student: 'student1', date : '2017-09-11 11:51', score: 50}, {student: 'student1', date : '2017-09-11 12:53', score: 90}, ... {student: 'student2', date : '2017-09-11 11:51', score: 20}, {student: 'student2', date : '2017-09-11 12:53', score: 30}, ...]您可以尝试像这样定义轴：var parseDate = d3.timeParse("%Y-%m-%d %H:%M");var x = d3.scaleTime().range([0, width]); var y = d3.scaleLinear().range([height, 0]);data.forEach(function(d) { d.date = parseDate(d.date); d.score = +d.score;});x.domain(d3.extent(data, function(d) { return d.date; }));y.domain([0, d3.max(data, function(d) { return d.score; })]);我已经修改了 d3noob 的示例以使用此数据（添加了更多数据点）：// Set the dimensions of the canvas / graphvar margin = { top: 30, right: 20, bottom: 70, left: 50 }, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;// Parse the date / timevar parseDate = d3.timeParse("%Y-%m-%d %H:%M");// Set the rangesvar x = d3.scaleTime().range([0, width]);var y = d3.scaleLinear().range([height, 0]);// Define the linevar priceline = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.score); });// Adds the svg canvasvar 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 datavar data = [ { student: 'student1', date: '2017-09-11 11:45', score: 60 }, { student: 'student1', date: '2017-09-11 11:51', score: 50 }, { student: 'student1', date: '2017-09-11 12:53', score: 90 }, { student: 'student1', date: '2017-09-11 12:57', score: 97 }, { student: 'student2', date: '2017-09-11 11:22', score: 10 }, { student: 'student2', date: '2017-09-11 11:31', score: 15 }, { student: 'student2', date: '2017-09-11 11:33', score: 20 }, { student: 'student2', date: '2017-09-11 11:38', score: 30 }, { student: 'student2', date: '2017-09-11 12:51', score: 45 }, { student: 'student2', date: '2017-09-11 12:59', score: 40 }]data.forEach(function(d) { d.date = parseDate(d.date); d.price = +d.price;});// Scale the range of the datax.domain(d3.extent(data, function(d) { return d.date;}));y.domain([0, d3.max(data, function(d) { return d.score;})]);// Nest the entries by symbolvar dataNest = d3.nest() .key(function(d) { return d.student; }) .entries(data);// set the colour scalevar color = d3.scaleOrdinal(d3.schemeCategory10);legendSpace = width / dataNest.length; // spacing for the legend// Loop through each symbol / keydataNest.forEach(function(d, i) { svg.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d.color = color(d.key); }) .attr("id", 'tag' + d.key.replace(/\s+/g, '')) // assign an ID .attr("d", priceline(d.values)); // Add the Legend svg.append("text") .attr("x", (legendSpace / 2) + i * legendSpace) // space legend .attr("y", height + (margin.bottom / 2) + 5) .attr("class", "legend") // style the legend .style("fill", function() { // Add the colours dynamically return d.color = color(d.key); }) .on("click", function() { // Determine if current line is visible var active = d.active ? false : true, newOpacity = active ? 0 : 1; // Hide or show the elements based on the ID d3.select("#tag" + d.key.replace(/\s+/g, '')) .transition().duration(100) .style("opacity", newOpacity); // Update whether or not the elements are active d.active = active; }) .text(d.key);});// Add the X Axissvg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x));// Add the Y Axissvg.append("g") .attr("class", "axis") .call(d3.axisLeft(y));body { font: 12px Arial;}path { stroke: steelblue; stroke-width: 2; fill: none;}.axis path,.axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges;}.legend { font-size: 16px; font-weight: bold; text-anchor: middle;}<script src="https://d3js.org/d3.v5.min.js"></script>