无法获得要显示在D3散点图中的点
[英]Unable to get the points to appear on D3 scatterplot
问题描述
Edit: Added code to load callback according to comment. 
编辑：添加了代码以根据注释加载回调。 Still get only single point though!! 虽然仍然只有一点！
I have the following D3 code, but I always get a blank graph, with just the scales appearing with a single (or many piled on top of each other) points (crosses). 我有以下D3代码，但我始终会得到一个空白图形，其中的标尺仅带有一个（或多个相互堆叠）点（十字）。
The csv import seems to go OK as can be soon from the following output from mydata 从mydata的以下输出可以很快看到csv导入似乎正常
Object { rating: 89, winsNoms: 80 }
Object { rating: 63, winsNoms: 30 }
Object { rating: 83, winsNoms: 30 }
and the dataset: 和数据集：
Id,Title,Year,Runtime,Country,imdbRating,imdbVotes,Budget,Gross,WinsNoms,IsGoodRating
13,Alone in the Dark,2005,96,"Canada, Germany, USA",2.3,37613,20000000,8178569,9,0
38,Boogeyman,2005,89,"USA, New Zealand, Germany",4.1,25931,20000000,67192859,0,0
52,Constantine,2005,121,"USA, Germany",6.9,236091,75000000,221594911,11,1
62,Diary of a Mad Black Woman,2005,116,USA,5.6,10462,5500000,50458356,26,0
I am not 100% sure about my scales, but I have examined many docs and can't see anything wrong. 我不确定百分百秤，但我检查了许多文档，看不到任何错误。
The big change to things I have done before is to try to add a cross, with all of the transform/translate stuff. 我之前所做的事情的最大变化是尝试添加一个带有所有transform / translate内容的十字架。
I know all the scales are a bit wrong and my margins are probably off, but why I am I not seeing any spread of points? 我知道所有的比例尺都有些错误，并且我的利润率可能不正确，但是为什么我看不到任何点差？
var margin = {top: 20, right: 19, bottom: 29, left: 39}; var w = 899; var h = 449; var mydata = []; var x = d3.scale .linear() .range([-1, w]); var y = d3.scale .linear() .range([h, -1]); var svg = d3.select("body") .append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Grab the data d3.csv('./movies.csv', function(error, csv){ if (error) { console.log("Error thrown"); throw error; } csv.forEach(function(d){ mydata.push({rating: parseInt(d.imdbRating * 10), winsNoms: parseInt(d.WinsNoms * 10) }); }); var x = d3.scale .linear() .range([-1, w]); var y = d3.scale .linear() .range([h, -1]); // Create some scales x.domain([mydata, d3.max(0, function(d) { return d.rating; })]); //d3.extent(data, function(d) { return dx; })); y.domain([mydata, d3.max(0, function(d) { return d.winsNoms; })]); // Stick the x axis in... svg.append("g") .attr("class", "x axis") .attr("transform", "translate(-1," + h + ")") .call(d3.svg .axis() .scale(x) .orient("bottom")); // and the y axis. svg.append("g") .attr("class", "y axis") .call(d3.svg .axis() .scale(y) .orient("left")); svg.append("g") .append("text") .attr("class", "titleText") .attr("y", margin.top) .attr("x", w / 2 + margin.left) .style("text-anchor", "end") .text(" Wins+Nominations vs. IMDb Rating"); // Put the crosses in to place (ie the points) svg.selectAll(".point") .data(mydata) .enter() .append("path") .attr("class", "point") .attr("d", d3.svg.symbol().type("cross")) .attr("transform", function(d) { console.log(d); return "translate(" + x(d.rating) + "," + y(d.winsNoms) + ")"; }); });
body { font: 12px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .point { fill: blue; stroke: #000; } .titleText { color: red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <script src="//d3js.org/d3.v3.min.js" defer></script> <script src="myscript.js" defer></script> </body> </html>
1 个解决方案
解决方案1
0 2018-09-28 01:11:01
Answer was provided by https://stackoverflow.com/users/9938317/riov8 答案由https://stackoverflow.com/users/9938317/riov8提供
I needed to include most of my code in the callback function when loading the csv. 加载csv时，我需要在回调函数中包含大部分代码。 ie after I did this: 即在我这样做之后：
d3.csv('./movies.csv', function(error, csv){
if (error) {
console.log("Error thrown");
throw error;
}
csv.forEach(function(d){
mydata.push({rating: parseInt(d.imdbRating * 10),
winsNoms: parseInt(d.WinsNoms * 10)
});
});
Instead of closing it with a }); 而不是使用}）将其关闭；
I moved the brackets to the end of the code so that they encompoassed everything thing. 我将方括号移到了代码的末尾，以使它们包含所有内容。
Thanks riov8 谢谢riov8
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.