0

我是 d3js 的新手，我必须通过解析 CSV 文件来创建 svg 图像（动态：相对于宽度和高度）。CSV 文件包含重复的两列。并且据此，只有我必须设置 CSV 图像的宽度和高度，并且应该使用相同的数据来创建根据数据形状大多不同的图像。目前我制作了一个固定尺寸的图像，我无法在左侧写名字。

<script>
var dataset =[]; var datasetx =[]; var datasety =[];var datasett =[];
var geneset =[]; var genesetx =[]; var genesety =[];var genesett =[];
var genesetxp =20; var genesetyp =20;
var xscale =60; var yscale =40; var xspace=40;var wspace=40;
var xdatascale =10; var ydatascale =20;
var radius =15; x1=32;
var gene=[];    var input ;var geney=[];
var genelist =[];   
d3.csv("data/test.csv", function(data) { 

var canvas = d3.select("body").append("svg")
.attr("height",500)
.attr("width",1000)

var labeldata = canvas.selectAll("text")
.data(data)
.enter()
.append("text")
.transition()
.delay(1)
.duration(1500)
.attr("x",function(d){

var labelx =d.target;
var labelx_len = datasetx.length; 
var labelxmatches=0;


for( var i=0; i<labelx_len; i++)
{
if(datasetx[i]==labelx)
{
    labelxmatches++;
}
}
if(labelxmatches==0)
{
datasetx.push(d.target);
xdatascale=xdatascale+wspace;
return xdatascale;
}


})

.attr("y", function(d){


var labelx =d.target;
var labelx_len = datasety.length; 
var labelxmatches=0;


for( var i=0; i<labelx_len; i++)
{
if(datasety[i]==labelx)
{
    labelxmatches++;
}
}
if(labelxmatches==0)
{
datasety.push(d.target);
return ydatascale;
}

})
.attr("transform", function(d){ 
var labelx =d.target;
var labelx_len = datasett.length; 
var labelxmatches=0;


for( var i=0; i<labelx_len; i++)
{
if(datasett[i]==labelx)
{
    labelxmatches++;
}
}
if(labelxmatches==0)
{
datasett.push(d.target);
x1=x1+wspace; return "rotate(270 "+ x1+",25)";
}   
})

.text(function(d){
var labelx =d.target;
var labelx_len = dataset.length; 
var labelxmatches=0;


for( var i=0; i<labelx_len; i++)
{
if(dataset[i]==labelx)
{
    labelxmatches++;
}
}
if(labelxmatches==0)
{
dataset.push(d.target);
return d.target;
}
})





var visual = canvas.selectAll("circle")
.data(data)
.enter()
.append("svg:circle")
.transition()
.delay(1)
.duration(1500)
.attr("cx",function(d)
{
var matches =0;
var input =d.source;
var total_len = gene.length; 
for( var i=0; i<total_len; i++)
{
if(gene[i]==input)
{
    matches++;
}
}
if(matches==0)
{
xscale =60;
gene.push(d.source);

}
else
{
xscale=xscale+xspace; 
}
return xscale;
})
.attr("cy",function(d)
{

var matches =0;
var input =d.source;

var total_len = geney.length; 
for( var i=0; i<total_len; i++)
{
if(gene[i]==input)
{
    matches++;
}
}
if(matches==0){yscale =yscale+xspace;   geney.push(d.source);}return yscale;})
.attr("r", radius)
.style("fill", function(d){var fcolor;if(d.ExpressionRatio == ""){fcolor="black";}else if(d.ExpressionRatio < "0"){fcolor="blue";}if(d.ExpressionRatio =="0"){fcolor="green";}if(d.ExpressionRatio >"0"){fcolor="red";}
return fcolor;}); 


$('svg circle').tipsy({ 
gravity: 'w', 
html: true, 
title: function(d) {
var d = this.__data__, gene = d.source , Consequence =d.Consequence, ExpressionRatio= d.ExpressionRatio, CNVRatio =d.CNVRatio;
return '<b>Gene:</b>' + gene + '<br><b>Consequence:</b>'+Consequence+'<br><b>ExpressionRatio:</b>'+ExpressionRatio+'<br><b>CNVRatio:</b>'+CNVRatio+''; 
}
});






xscale=xscale+xspace;







})


</script>
4

0 回答 0