Question

  var updateChart = function (dataset) {

    var legendG = svg.selectAll(".legend")
       .data(donut(dataset), function (d) {
           return d.data.label;
       })
       .enter().append("g")
       .attr("transform", function (d, i) { return "translate(" + (width - 350) + "," + (i * 15 + 20) + ")"; })
       .attr("class", "legend");

    legendG.exit().remove();

    legendG.append("rect")
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill", function (d, i) {
          return color(i);
      });

    legendG.append("text")
      .text(function (d) {
          return d.data.label;
          //+ ' ' + d.data.callState;
      })
      .style("font-size", 12)
      .attr("y", 10)
      .attr("x", 11)
      .attr("width", 100);

    arcs = arcs.data(donut(dataset), function (d) { return d.data.label });

    arcs.exit().remove();

    arcs = arcs.enter()
      .append("path")
      .attr("stroke", "white")
      .attr("stroke-width", 0.8)
      .attr("fill", function (d, i) {
          return color(i);
      })
      .attr("d", arc)
      .merge(arcs);

    arcs.transition()
      .duration(duration)
      .attrTween("d", arcTween);

    sliceLabel = sliceLabel.data(donut(dataset), function (d) { return d.data.label });

    sliceLabel.exit().remove();

    sliceLabel = sliceLabel.enter()
      .append("text")
      .attr("class", "arcLabel")
      .attr("transform", function (d) {
          return "translate(" + (arc.centroid(d)) + ")";
      })
      .attr("text-anchor", "middle")
      .style("fill-opacity", function (d) {
          if (d.value === 0) {
              return 1e-6;
          } else {
              return 1;
          }
      })
      .text(function (d) {
          return d.data.value;
      })
      .merge(sliceLabel);

    sliceLabel.transition()
      .duration(duration)
      .attr("transform", function (d) {
          return "translate(" + (arc.centroid(d)) + ")";
      })
      .style("fill-opacity", function (d) {
          if (d.value === 0) {
              return 1e-6;
          } else {
              return 1;
          }
      });


};

这是我用d3版本4编写的实时饼图的更新代码。馅饼添加和删除新旧数据。传说似乎没有删除旧数据。它似乎确实添加了新数据。图例的所有代码都在updateChart函数中。我错过了什么吗？这是一个示例小提琴：broken exit()

Answer 1

您在exit()选择而不是enter选择中呼叫update：

  var legendG = svg.selectAll(".legend")
           .data(donut(dataset), function (d) {
               return d.data.label;
           })

      var  legendEnter= legendG.enter().append("g")
           .attr("transform", function (d, i) { return "translate(" + (width - 500) + "," + (i * 15 + 20) + ")"; })
           .attr("class", "legend");    


      legendG.exit().remove();

      legendEnter.append("rect")
          .attr("width", 10)
          .attr("height", 10)
          .attr("fill", function (d, i) {
              return color(i);
          });

      legendEnter.append("text")
          .text(function (d) {
              return d.data.label;
              //+ ' ' + d.data.callState;
          })
          .style("font-size", 12)
          .attr("y", 10)
          .attr("x", 11);

以下是更新后的fiddle

删除d3图例项失败

1 个答案: