Question

我是D3的新手，我在图表上需要一些帮助。

我想在同一个CSV文件中将数据传递给另一个数据，但我无法在d3.pie()上进行转换，我只需要从d.A2008传递到d。 A2015，但每次都有bug。

我的代码：

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

如何更改饼图的数据？

1 个答案: