D3 散点图 v6 无法正确显示 plot

Question

I have an issue with D3 scatterplot where the data are not correctly plot (plotted to 1 horizontal line rather than a scattered plot, the actual data is also scattered) and the x-axis not able to show up.

 // 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 = 500 - margin.top - margin.bottom; // parse the date / time var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%L%Z"); // set the ranges var x = d3.scaleTime().range([0, width]); var y = d3.scaleLinear().range([height, 0]); // append the svg obgect 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 data = data.rows; // format the data data.forEach(function(d) { var momentTemp = moment(d[0]).format("YYYY-MM-DDTHH:mm:ss.SSSZ"); var parseTemp = parseTime(momentTemp); d.date = parseTemp; d.close += d[1]; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.close; })]); var xValue = function(d) { return d.date; } var yValue = function(d) { return d.close; } // Add the scatterplot svg.selectAll("dot").data(data).enter().append("circle").attr("r", 1.5).attr("cx", function(d) { return x(d.date); }).attr("cy", function(d) { return y(d.close); }); // Add the X Axis svg.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x)); // Add the Y Axis svg.append("g").attr("transform", "translate(" + margin.left + ",0)").call(d3.axisLeft(y));

Answer 1

That happens when your data is invalid. Are you sure the field close is correct? Your data calls the column ratio . I made some sample data and everything works:

 // 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 = 500 - margin.top - margin.bottom; // parse the date / time var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%L%Z"); // set the ranges var x = d3.scaleTime().range([0, width]); var y = d3.scaleLinear().range([height, 0]); // append the svg obgect 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 + ")"); var data = new Array(100).fill(undefined).map(function(d, i) { return { date: new Date(Number(new Date("01/01/2000")) + i * 24 * 60 * 60 * 1000), close: Math.random(), }; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.close; })]); var xValue = function(d) { return d.date; } var yValue = function(d) { return d.close; } // Add the scatterplot svg.selectAll("dot").data(data).enter().append("circle").attr("r", 1.5).attr("cx", function(d) { return x(d.date); }).attr("cy", function(d) { return y(d.close); }); // Add the X Axis svg.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x)); // Add the Y Axis svg.append("g").attr("transform", "translate(" + margin.left + ",0)").call(d3.axisLeft(y));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>