如何使用d3.js从CSV文件制作散点图?
我是d3.js的新手。我正在尝试使用csv文件中的数据制作散点图。从csv文件中,我利用了两列中的数据如何使用d3.js从CSV文件制作散点图?,csv,d3.js,visualization,scatter-plot,Csv,D3.js,Visualization,Scatter Plot,我是d3.js的新手。我正在尝试使用csv文件中的数据制作散点图。从csv文件中,我利用了两列中的数据 d3.csv("test.csv",function (data) { var margin = {top: 30, right: 10, bottom: 50, left: 60}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.botto
d3.csv("test.csv",function (data) {
var margin = {top: 30, right: 10, bottom: 50, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xMax = d3.max(data, function(d) { return +d.Survivaltime; }),
xMin = 0,
yMax = d3.max(data, function(d) { return +d.Year; }),
yMin = 1950;
//Define scales
var x = d3.scale.linear()
.domain([xMin, xMax])
.range([0, width]);
var y = d3.scale.linear()
.domain([yMin, yMax])
.range([height, 0]);
});
// the chart object, includes all margins
var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
// the main object where the chart and axis will be drawn
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
.tickSize(-height)
.tickFormat(d3.format("s"));
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
.ticks(5)
.tickSize(-width)
.tickFormat(d3.format("s"));
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
// draw the graph object
var svg = main.append("svg:g");
g.selectAll("scatter-dots")
.data(d.Year) // using the values in the ydata array
.enter().append("svg:circle") // create a new circle for each value
.attr("cy", function (d) { return y(d.Year); } ) // translate y value to a pixel
.attr("cx", function (d) { return x(d.Survivaltime); } ) // translate x value
.attr("r", 10) // radius of circle
.style("opacity", 0.6); // opacity of circle
以下是csv文件的链接:
请帮帮我。大体上看起来不错。我能看到的唯一问题(尽管我可能还遗漏了其他问题)就在接近尾声的时候:
// draw the graph object
//var svg = main.append("svg:g");// <---- this is causing a bug. Should be:
var g = main.append("svg:g");
//绘制图形对象
//var svg=main.append(“svg:g”);//谢谢你的回答。我更正了所有内容,但仍然显示空白页。@user2019940好吧。。。除此之外,如果没有一个工作的JSFIDLE,就真的不可能调试它。那里的代码太多了。
g.selectAll(".scatter-dots"); // <---- added a period before scatter-dots