2017-11-25 349 views
0

我是D3新手,在图形上需要一些帮助。如何更改饼图的数据?

我想从一个数据传递到另一个在同一个CSV文件中,但我不能在d3.pie()上做一个转换,我只需要从d.A2008转到d.A2015,但是每次它都会出现问题。

我的代码:

var width = 600; 
var height = 400; 
var radius = 200; 

var canvas = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .style("border","1px solid black") 
    .append("g") 
    .attr("transform","translate(200,200)"); 

var colorScale = d3.scaleOrdinal() //va pemrettre d'attribuer de la couleur sur une échelle de données de type string 
       .range(["red","blue","orange","yellow","pink","purple","green","white","grey","brown"]); 

var pie = d3.pie() 
    .sort(null) 
    .value (function(d,i){return d.A2008;}); 

var arc = d3.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 


d3.csv("CAplateforme.csv", function(data){ 
    var svg = canvas.selectAll(".arc") 
     .data(pie(data)) 
     .enter() 
     .append("g") 
     .attr("class", "arc"); 

    svg.append("path") 
     .attr("d",arc) 
     .attr("fill", function(d,i){ return colorScale(d.data.A2008);}); 
     //.transition() 
     // .duration(1500) 
     //.delay(2000) 
     //.attr("d",arc) 
     //.attr("fill", function(d,i){ return colorScale(d.data.A2015);}); 

    svg.append("g") 
    .attr("class", "legend") 
    .selectAll("text") 
    .data(pie(data)) 
    .enter() 
    .append("text") 
    .text(function(d){return ". " + d.data.Type +" ("+ d.data.A2008 + ")";}) 
    .attr("fill", function(d){return colorScale(d.data.A2008);}) 
    .attr("y", function(d,i){return 20*(i+1);}) 
    enter code here.attr("transform","translate(250,-150)"); 
    //.transition() 
    //.duration(1500) 
    //.delay(2000) 
    //.text(function(d){return ". " + d.data.Type +" ("+ d.data.A2015 + ")";}) 
    //.attr("fill", function(d){return colorScale(d.data.A2015);}); 

    }); 

回答

0

我想你初始化元素上的错误的方式。试试:

var svg = canvas.selectAll(".arc").data(pie(data)); 

//Here you put the code for the elements entering the DOM 
svg.enter() 
    .append(stuff you want to append) 
    .and so on and so forth; 

//And then you put the code for the elements transitioning 
svg.transition() 
    .duration(1500) 
    .attr(and so on and so forth);