如何更改餅圖的數據？

Question

我是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);}); 

    }); 

Answer 1

我想你初始化元素上的錯誤的方式。試試：

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);