Question

构建一个D3饼图，该饼图应显示玩家和得分占总得分的百分比。数据是基于点击构建的，并更新名为playersObj的数组，看起来像......

var playersObj = [
    {"playerName":"Jessica Jones","playerID":157,"playerScore":2},
    {"playerName":"Luke Cage","playerID":158,"playerScore":0},
    {"playerName":"Matt Murdock","playerID":159,"playerScore":6}
]

在我的脚本中，我增加了playerScore并尝试相应地更新图表。这是我到目前为止的代码，我设置了细节，然后在数据更新时尝试绘制它......

/*
----------------------------------------------------------------------
DONUT CHART
----------------------------------------------------------------------
*/

//Set color range
var color = d3.scale.ordinal()
    .range(["red", "green", "blue", "purple", "orange"]);

//Set stage dimensions
var width = 300;
var height = 300;
var radius = Math.min(width, height) / 2;

//Select div and add svg into it
var svg = d3.select("#donut").append("svg")
  .attr("width", width)
  .attr("height", height);

var group = svg.append("g")
  .attr("transform", "translate(" + radius + "," + radius + ")")

//Set inner and outer radius of chart
var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 75);


//UPDATE THE DONUT

function updateDonut(){
    console.log("Updating donut...");
    //console.log(donutData);

    //Create pie chart
    var pie = d3.layout.pie()
      .value(function(d) {
        return d.playersScore;
      });

    var arcs = group.selectAll(".arc")
      .data(pie(playersObj))
      .enter()
      .append("g")
      .attr("class", "arc");

    console.log(pie(playersObj));

    arcs.append("path")
      .attr("d", arc)
      .attr("fill", function(d) {
        //console.log(d);
        return color(d.data.playerName);
      });

    arcs.append("text")
      .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
      })
      .text(function(d) {
        return d.data.firstName+": "+d.data.playersScore
      });

}

作为结果，我得到一个有两个问题的图表。首先，图表将文本附加到playerScore为0的条目中。看到每个人都以0开头，大量的名称会叠加在一起，因为它们的切片没有值。第二个问题是馅饼在第二次更新后永远不会更新。 playersObj更新，console.log(pie(playersObj));显示正确的值，但图表显示永远不会更改。

我已经看到了带有苹果的Bostock示例，但这正在改变数据，我只需要更新和重绘。其他帖子似乎采取了不同的方法，因此让我感到困惑的是他们的解决方案如何运作。

D3更新本地数据并重新绘制饼图

0 个答案: