使用D3.js的<circle>属性cx =“NaN”的值无效
我正在尝试创建一个散布图的形式。 我有一个自定义的x轴和两个a轴的特定比例。 我也为它实现了缩放功能。 到目前为止，一切都很好，但是当我最终尝试将数据绘制为圆时，出现两个错误：
。
我的图可以在这个网站上查看：http：//servers.binf.ku.dk/hemaexplorerbeta/（这个圈子很大，因为我想确保我在他们之前知道他们的位置）
我基于从MYSQL服务器读取的数据创建我的圈子。 我检查了我的所有数据，数字是正确的。 他们要么是错误地绘图，要么是我的缩放/缩放错误。
另外你也许会注意到我创建了我的坐标轴并最初用一些值进行缩放，并在之后的某些功能中进行了修改。 这是因为我正计划在网站上加载一个空图形，用户可以决定加载它的数据集，这些图形函数必须为要加载的数据定制缩放和轴。
我粘贴了下面的源代码：
//Setting generic width and height values for our SVG.
var margin = {top: 60, right: 0, bottom: 70, left: 40},
genWidth = 1024;
genHeight = 768;
width = genWidth - 70 - margin.left - margin.right,
height = genHeight - 100 - margin.top - margin.bottom;
//Other variable declarations.
var valueY = 0;
var graphData = Array();
//Creating scales used to scale everything to the size of the SVG.
var xScale = d3.scale.linear()
.domain([0, genWidth])
.range([0, width-margin.right]);
var yScale = d3.scale.linear()
.domain([0, genHeight])
.range([height, margin.bottom]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Zoom command ...
var zoom = d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1,10])
.on("zoom", zoomTargets);
// The mark '#' indicates an ID. IF '#' isn't included argument expected is a tag such as "svg" or "p" etc..
var SVG = d3.select("#mainSVG")
.attr("class", "SVG")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("pointer-events", "all")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//This creates a body with a clippath inside the svg where all element in the graph will be. This prevents elemnts on the graph to go past the axis.
var SVGbody = SVG.append("g")
.attr("clip-path", "url(#clip)")
.call(zoom);
//Create background. The mouse must be over an object on the graph for the zoom to work. The rectangle will cover the entire graph.
var rect = SVGbody.append("rect")
.attr("width", width)
.attr("height", height);
//Showing the axis that we created earlier in the script for both X and Y.
SVG.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-30)"
});;
SVG.append("g")
.attr("class", "y axis")
.call(yAxis);
d3.json("getdata.php?type=load&gene=CCL5&data=human", function(error, data) {
var arrayValues = [];
if(error){ return console.log(error); }
data.forEach( function(d) {
arrayValues.push(d.gene_name);
valueY = getValueY(d.gene_data);
var string = JSON.stringify(d.gene_data);
graphData.push(string.split(" "));
});
//console.log(graphData);
arrayValues = removeDuplicatesInPlace(arrayValues);
updateScaleX(arrayValues.length);
updateAxisX(arrayValues);
//console.log(arrayValues);
updateScaleY(valueY);
//This selects 4 circles (non-existent, there requires data-binding) and appends them all below enter.
//The amount of numbers in data is the amount of circles to be appended in the enter() section.
for(var i = 0;i <= graphData.length;i++){
var circle = SVGbody
.selectAll("circle")
.data(graphData[i])
.enter()
.append("circle")
.attr("cx",function(d){return xScale((i*100)+100);})
.attr("cy",function(d){return yScale(d)})
.attr("r",20);
}
});
//Clipping is defined here used to prevent elements from the graph from going past the axis.
var clip = SVG.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("id", "clip-rect")
.attr("x", "0")
.attr("y", "0")
.attr("width", width)
.attr("height", height);
//Resets zoom when click on circle object. Zoom work now, should be changed to a button instead of click on circle though.
SVG.selectAll("circle").on("click", function() {
zoom.scale(1);
zoom.translate([0,0]);
zoomTargets();
});
//The function handleling the zoom. Nothing is zoomed automatically, every elemnt must me defined here.
function zoomTargets() {
var translate = zoom.translate(),
scale = zoom.scale();
tx = Math.min(0, Math.max(width * (1 - scale), translate[0]));
ty = Math.min(0, Math.max(height * (1 - scale), translate[1]));
//This line applies the tx and ty which prevents the graphs from moving out of the limits. This means it can't be moved until zoomed in first.
zoom.translate([tx, ty]);
SVG.select(".x.axis").call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-30)"
});
SVG.select(".y.axis").call(yAxis);
SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
}
function resetZoom() {
zoom.scale(1);
zoom.translate([0,0]);
zoomTargets();
}
function updateAxisX(arr) {
var formatAxis = function(d, i) { return arr[i]; }
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickValues(createTickValuesArray(arr.length))
.tickFormat(formatAxis);
SVG.select(".x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-30)"
});
}
function updateScaleX(newWidth){
genWidth = newWidth;
xScale = d3.scale.linear()
.domain([0, (newWidth*100)+50])
.range([0, width-margin.right]);
SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
zoom.x(xScale);
}
function updateScaleY(newHeight){
console.log(newHeight);
var yScale = d3.scale.linear()
.domain([0, newHeight])
.range([height, margin.bottom]);
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
SVG.select(".y.axis").call(yAxis);
SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
zoom.y(yScale);
}
function createTickValuesArray(amountOfTicks){
var tickValuesArr = [];
for(var i = 1;i<=amountOfTicks;i++){
tickValuesArr[i-1] = 100*i;
}
return tickValuesArr;
}
function getValueY(coordinates){
return d3.max(coordinates, Number);
}
//Custom functions used for specific uses.
var removeDuplicatesInPlace = function (arr) {
var i, j, cur, found;
for (i = arr.length - 1; i >= 0; i--) {
cur = arr[i];
found = false;
for (j = i - 1; !found && j >= 0; j--) {
if (cur === arr[j]) {
if (i !== j) {
arr.splice(i, 1);
}
found = true;
}
}
}
return arr;
};
graphData中每个数组的第一个和最后一个元素在由于附加引号而被解析为数字时会导致错误
例如graphData的第七个数组看起来像这样：
console.log(graphData[6]) // [""5.149230", "4.965121""]
这个原因似乎是在获取数据时不必要的JSON.stringfiy()调用
d3.json("getdata.php?type=load&gene=CCL5&data=human", function(error, data) {
var arrayValues = [];
if(error){ return console.log(error); }
data.forEach( function(d) {
arrayValues.push(d.gene_name);
valueY = getValueY(d.gene_data);
var string = JSON.stringify(d.gene_data); // <-- this one
graphData.push(string.split(" "));
});
d.gene_data已经是一个字符串，所以它应该按预期工作，当你删除JSON.stringify()
上一篇: Invalid value for <circle> attribute cx=“NaN” using D3.js