使用D3.JS绘制图形

我正在尝试使用D3.js绘制图形。 file.json是我的JSON文件。 日期时间应该在X轴中，销售应该在Y轴中。

这是我的JSON结构，

[ { Date : "2017-12-17 18:30:01", Sales : "50" }, { Date : "2017-12-17 17:30:00", Sales : "20" }, { Date : "2017-12-17 16:30:00", Sales : "10" } ] 

我想绘制图表日期与销售数量。 这是我的JS： –

    .line { fill: none; stroke: steelblue; stroke-width: 2px; }      d3.json("file.json", function(data) { var canvas = d3.select("body").append("svg") .attr("width", 500) .attr("height", 500) .attr("border", "black") var group = canvas.append("g") .attr("transform", "translate(100,10)") var line = d3.line() .x(function(d, i) { return d.Date; }) .y(function(d, i) { return d.Sales; }); group.selectAll("path") .data(data).enter() .append("path") .attr("d", function(d){ return line(d) }) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 3); });  

它显示错误： – Uncaught TypeError: Cannot read property 'line' of undefined 。 我从d3.svg.line()更改为d3.line() ，但它现在显示空白页面。

Answer 1

以下是您可能需要的示例（摘自： https ： //bl.ocks.org/mbostock/3883245 ）

 var data = [ { Date : "2017-12-17 18:30:01", Sales : "50" }, { Date : "2017-12-17 17:30:00", Sales : "20" }, { Date : "2017-12-17 16:30:00", Sales : "10" } ].map(function(entry) { return { Date: d3.timeParse("%Y-%m-%d %H:%M:%S")(entry.Date), Sales: +entry.Sales } }); var svg = d3.select("svg"), margin = {top: 20, right: 20, 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 x = d3.scaleTime() .rangeRound([0, width]); var y = d3.scaleLinear() .rangeRound([height, 0]); var line = d3.line() .x(function(d) { return x(d.Date); }) .y(function(d) { return y(d.Sales); }); x.domain(d3.extent(data, function(d) { return d.Date; })); y.domain(d3.extent(data, function(d) { return d.Sales; })); g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) g.append("g") .call(d3.axisLeft(y)) g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); 

 '