Javascript D3散点图未显示
我试图用D3做一个散点图，但是点没有显示出来。我可以看到在控制台中生成的圆圈。有人知道为什么吗Javascript D3散点图未显示,javascript,d3.js,Javascript,D3.js,我试图用D3做一个散点图，但是点没有显示出来。我可以看到在控制台中生成的圆圈。有人知道为什么吗 <script> var rawData= ...; function plotData(data){ var concentration = [], uptake = []; for (var i=1; i<data.length; i++) { concentration.push(dat
<script>
var rawData= ...;
function plotData(data){
var concentration = [],
uptake = [];
for (var i=1; i<data.length; i++) {
concentration.push(data[i][3]);
uptake.push(data[i][4]);
}
var width = 1000, height = 800;
var x = d3.scale.linear()
.domain([d3.min(concentration)-20, d3.max(concentration)+20])
.range([0, width]);
var y = d3.scale.linear()
.domain([d3.min(uptake)-20, d3.max(uptake)+20])
.range([height, 0]);
var svg = d3.select("#scatter").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("scatterplot")
.data(uptake)
.enter().append("svg:circle")
.attr("cy", function(d) {return y(d); } )
.attr("cx", function(d,i) {return x(concentration[i]); } )
.style("fill", "brown")
.attr("r", 3);
}
</script>
<body>
<div>
<button onclick="plotData(rawData)">Visualize</button>
</div>
<hr />
<div id=scatter class=visualization></div>
</body>
var-rawData=。。。；
函数绘图数据（数据）{
var浓度=[]，
摄取量=[]；
对于（var i=1；i，DOM检查器显示您的程序正在为点指定负cx和cy值。由于您使用线性比例来设置这些属性，这表明您的比例范围或域有问题
您将您的比例定义为：
var x = d3.scale.linear()
.domain([d3.min(concentration)-20, d3.max(concentration)+20])
.range([0, width]);
var y = d3.scale.linear()
.domain([d3.min(uptake)-20, d3.max(uptake)+20])
.range([height, 0]);
假设width
和height
都是正数，则从刻度中获取负输出值的唯一方法是输入一个小于X刻度的最小域值或大于Y刻度的最大域值的数字，这意味着max/min函数没有执行您所体验的操作t
使用d3.max
和d3.min
产生意外结果的最可能原因是您正在对存储为字符串的数字进行排序。这甚至被作为一个警告提到——如果您的数字存储为字符串，它们将按字母顺序进行比较，而不是按数值进行比较
您的线性比例仍然有效，因为它们将任何输入值强制为数字，所以您不会从编译器中得到任何错误，只是意外的结果
解决方案（正如@Boxuan所发现的，请参阅注释）只是确保在将数字传递给max和min函数之前，所有数字都是这样存储的。因为您的代码中已经有一个循环，您可以在其中组织数据，所以这是进行解析的自然位置：
for (var i=1; i<data.length; i++) {
concentration.push(parseFloat(data[i][3]));
uptake.push(parseFloat(data[i][4]));
}
for（var i=1；i通过查看cx
和cy
值，它们看起来好像不在屏幕上。我将重新查看您的x
和y
比例，并确保计算出正确的最小值/最大值。您的圆圈都在SVG外部绘制（检查负的cx和cy值）。是否有可能您的数字被存储为字符串，并且max/min函数因此给出了错误的值？这看起来像是@AmeliaBR暗示的……从中可以看出代码似乎很好。@AmeliaBR您是对的。您介意提交一个答案吗？我所做的就是concentration.push（parseFloat（data[I][3]））
和acception.push（parseFloat（数据[i][4]）；