D3：在1個圖形中繪制3個csv，每個圖形都有一個功能，但2個無效

Question

我正在嘗試使用D3創建一個基本但可工作的交互式MCA（用於多重對應分析）。 我的其中一個功能完美運行（Indiv一個），但是其他兩個功能雖然以相同的方式格式化，卻沒有。

var margin = {right: 30, left: 30, top: 50, bottom: 50},
    width = 620 - margin.left - margin.right,
    height = 500+margin.top + margin.bottom;

var x = d3.scale.linear()
    .domain([-2,3])
    .range([0,width])

var y = d3.scale.linear()
    .domain([2,-2])
    .range([0,height]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")  
    .tickSize(1);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(1);

var canvas = d3.select(".result-side1")
    .append("svg") 
    .attr("width", width+20) 
    .attr("height", height+20)
    .append('g')
    .attr('transform', 'translate(30,30)');

canvas.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height-30) + ")")
    .call(xAxis);
canvas.append("g")
    .attr("class", "y axis")
    .call(yAxis);

canvas.append("text") 
    .attr("x", (width / 2)) 
    .attr("y", 40 - (margin.top)) 
    .attr("text-anchor", "middle") 
    .style("font-size", "22px") 
    .style("text-decoration", "underline") 
    .attr("fill","white")
    .text("Les Etats classés selon leur profil");


function affichInd(){
var individus = canvas.append("g");
d3.csv("donnees/USAindiv.csv", function(error, data)
{
 //Add data to the graph and call enter.
 var dataEnter = individus.selectAll("circle").data(data).enter();
 var dataEntertext = individus.selectAll("text").data(data).enter();
 dataEnter.append("circle")
    .attr("cx", function(d,i){return x(d.Dim1);})
    .attr("cy", function(d,i){return y(d.Dim2);})
    .attr("r", 2)
    .attr("fill","#3399FF");
dataEntertext.append("text")
    .attr("x", function(d,i){return x(d.Dim1);})
    .attr("y", function(d,i){return y(d.Dim2);})
    .attr("fill","#3399FF")
    .text(function(d,i){return d.State});
    })
 }
/* These last two don't work */

/*Variables*/   
function affichVar(){
var variables = canvas.append("g");
d3.csv("donnees/USAvaria.csv",
function(error, datavaria)
{
 //Add data to the graph and call enter.
 var datavariaEnter = variables.selectAll("circle").data(datavaria).enter();
 var datavariaEntertext = variables.selectAll("text").data(datavaria).enter();
 datavariaEnter.append("circle")
    .attr("cx", function(d,i){return x(d.Dim1);})
    .attr("cy", function(d,i){return y(d.Dim2);})
    .attr("r", 2)
    .attr("fill","#B9CC14");
datavariaEntertext.append("text")
    .attr("x", function(d,i){return x(d.Dim1);})
    .attr("y", function(d,i){return y(d.Dim2);})
    .attr("fill","#B9CC14")
    .text(function(d,i){return d.Variables});
})
}

/*Variables supplémentaires*/
function affichVarSupp(){
var variablessupp = canvas.append("g");
d3.csv("donnees/USAvasup.csv", function(error, datavasup)
{
 //Add data to the graph and call enter.
 var datavasupEnter = variablessupp.selectAll("circle").data(datavasup).enter();
 var datavasupEntertext = variablessupp.selectAll("text").data(datavasup).enter();
 datavasupEnter.append("circle")
    .attr("cx", function(d,i){return x(d["Dim1"]);})
    .attr("cy", function(d,i){return y(d["Dim2"]);})
    .attr("r", 2)
    .attr("fill","#FF584C");
datavasupEntertext.append("text")
    .attr("x", function(d,i){return x(d["Dim1"]);})
    .attr("y", function(d,i){return y(d["Dim2"]);})
    .attr("fill","#FF584C")
    .text(function(d,i){return d.Qualisup});

})
}

有什么理由為什么這行不通？

我嘗試擺弄一些代碼，這就是為什么它們並不完全相似的原因，但是我想我錯過了一些概念性的東西……這就是我得到的： http : //www.victoralexandre.fr/d3_acm_3.html

謝謝你的幫助 ！ 維克

Answer 1

我的朋友們的回答是在文件中吹噓：我只需要將d3.csv更改為d3.tsv，NaN就會變成數字。

歡呼。 （盡管我不太清楚為什么會這樣）