javascript - d3 : Draw children once, 但每次都更新

Question

我正在尝试绘制一个包含多个饼图的图表，每个图表在一个 text 容器内绘制两个中心 tspan 标签。提供每个子图的单独数据并进行初始绘图。

但是，当单击其中一个 setX 按钮时，tspan 内容不会更新 - 与圆弧(我已在此处隐藏其代码)形成对比。

但是，当我将 var centerTextGroup = ggEnter.append("text") 替换为 var centerTextGroup = graphGroup.append("text") 时， drawChart 绘制一个新 文本组元素，我也不想要它。

如何解决这个问题并使 drawCharts 正确更新 tspan？

编辑:一种解决方案可能是在 var centerTextGroup = graphGroup.append("text") 之前使用 graphGroup.selectAll("text").remove(); ，它有效，但我强烈怀疑这不是 d3 做事的方式......

var config = {
  width: 150,
  height: 100,
  circleYCenter: 50,
  circleXCenter: 75,
  circleRad: 50,
  circleWidth: 15,
  arcWidth: 20,
};
var svgContainer = null;

function drawCharts(data) {
  var container = svgContainer.select("#bigCircleGroup");
  var graphGroup = container.selectAll("g.graphGroup").data(data);
  var ggEnter = graphGroup.enter().append("g").attr({
    transform: function(d, i) {
      return "translate(" + (config.width * i) + ",0)";
    },
    class: "graphGroup",
    id: function(d, i) {
      return "bigCircle" + i;
    }
  });
  graphGroup.exit().remove();

  //Standard, common background arc. Append to enter selection, needs only to be drawn once per graph
  var circleArc = d3.svg.arc().innerRadius(config.circleRad - (config.circleWidth / 2)).outerRadius(config.circleRad + (config.circleWidth / 2)).startAngle(0).endAngle(Math.PI * 2);
  ggEnter.append("path").attr({
    "d": circleArc,
    "transform": "translate(" + (config.circleXCenter) + "," + (config.circleYCenter) + ")",
    "stroke": "none",
    "fill": "#ececec"
  });

  //Label. Group and labels should be drawn once per graph, but updated every time
  var centerTextGroup = ggEnter.append("text").attr({
    "x": config.circleXCenter,
    "y": config.circleYCenter,
    "class": "center"
  }).style({
    "text-anchor": "middle",
    "alignment-baseline": "baseline",
    "font-size": "30px",
    "fill": "#5d5d5d"
  });
  var bigDigitLabel = centerTextGroup.append("tspan").style("alignment-baseline", "baseline").attr("class", "bigDigit").text(function(d) {
    return d.text.center;
  });
  var unitLabel = centerTextGroup.append("tspan").style("font-size", "20px").attr("dy", 0).text(function(d) {
    return d.text.unit;
  });

  //Draw arcs here (removed for brevity)
}


$(document).ready(function() {
  svgContainer = d3.select("svg");
  $("#set1").click(function() {
    drawCharts([{
      "data": [{
        "value": "0.5",
        "color": "pink"
      }, {
        "value": "0.3",
        "color": "lightblue"
      }],
      "text": {
        "center": 50,
        "unit": "%"
      }
    }, {
      "data": [{
        "value": "0.7",
        "color": "pink"
      }, {
        "value": "0.3",
        "color": "lightblue"
      }],
      "text": {
        "center": 70,
        "unit": "%"
      }
    }]);
  }).click();
  $("#set2").click(function() {
    drawCharts([{
      "data": [{
        "value": "0.1",
        "color": "pink"
      }, {
        "value": "0.05",
        "color": "lightblue"
      }],
      "text": {
        "center": 10,
        "unit": "%"
      }
    }, {
      "data": [{
        "value": "1",
        "color": "pink"
      }, {
        "value": "0",
        "color": "lightblue"
      }],
      "text": {
        "center": 100,
        "unit": "%"
      }
    }]);
  });
  $("#set3").click(function() {
    drawCharts([{
      "data": [{
        "value": "0.1",
        "color": "pink"
      }, {
        "value": "0.5",
        "color": "lightblue"
      }],
      "text": {
        "center": 10,
        "unit": "%"
      }
    }]);
  });
  $("#set4").click(function() {
    drawCharts([{
      "data": [{
        "value": "0.1",
        "color": "pink"
      }, {
        "value": "0.5",
        "color": "lightblue"
      }],
      "text": {
        "center": 10,
        "unit": "%"
      }
    }, {
      "data": [{
        "value": "0.1",
        "color": "pink"
      }, {
        "value": "0.5",
        "color": "lightblue"
      }],
      "text": {
        "center": 10,
        "unit": "%"
      }
    }, {
      "data": [{
        "value": "0.9",
        "color": "pink"
      }, {
        "value": "0.1",
        "color": "lightblue"
      }],
      "text": {
        "center": 10,
        "unit": "%"
      }
    }, ]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width=450 height=100 style="display:block;">
  <g id="bigCircleGroup"></g>
</svg>
<button id="set1">set1</button>
<button id="set2">set2</button>
<button id="set3">set3</button>
<button id="set4">set4</button>

Answer 1

因此对于变化的数据，enter 应用于新的数据点。在 enter 之前，有一个比喻性的 update 可以应用于更改的数据点，或者像 often the case 一样, 到新的 entered 和现有数据点的元素，最后 exit 应用于已删除的数据点。所以它变得有点复杂，但如果您可以在数据进入后清理并重用您设置数据的方式，并将其放入 enter 之后的 update 步骤，您可以得到更符合 d3 试图帮助您编写数据驱动文档的方式。还有一些方法可以仅使用 d3 而不使用 jquery 来启用点击功能，但是我假设页面的其他部分使用 jquery，因此它对您来说实际上是免费的。

var dataSets = [
  // Set One: 2 Datapoints
  [{
 "data": [{"value": "0.5","color": "pink"},
          {"value": "0.3","color": "lightblue"}],
 "text": {"center": 50, "unit": "%"}
  },{
 "data": [{"value": "0.7", "color": "pink"},
          {"value": "0.3", "color": "lightblue"}],
 "text": {"center": 70, "unit": "%"}
  }],
  // Set Two: 2 Datapoints
  [{
 "data": [{"value": "0.1", "color": "pink"},
          {"value": "0.05", "color": "lightblue"}],
 "text": {"center": 10, "unit": "%"}
 }, {
 "data": [{"value": "1", "color": "pink"},
          {"value": "0", "color": "lightblue"}],
 "text": {"center": 100, "unit": "%"}
  }],
  // Set Three: 1 Datapoints
  [{
 "data": [{"value": "0.1", "color": "pink"},
          {"value": "0.5", "color": "lightblue"}],
 "text": {"center": 10, "unit": "%"}
  }],
  // Set Four: 3 Datapoints
  [{
 "data": [{"value": "0.1", "color": "pink"},
          {"value": "0.5", "color": "lightblue"}],
 "text": {"center": 10, "unit": "%"}
  },{
 "data": [{"value": "0.1", "color": "pink"},
          {"value": "0.5", "color": "lightblue"}],
 "text": {"center": 10, "unit": "%"}
  },{
 "data": [{"value": "0.9", "color": "pink"},
          {"value": "0.1", "color": "lightblue"}],
 "text": {"center": 10, "unit": "%"}
  }]];

 var config = {
   width: 150,
   height: 100,
   circleYCenter: 50,
   circleXCenter: 75,
   circleRad: 50,
   circleWidth: 15,
   arcWidth: 20,
 };
 var svgContainer = null;

 function drawCharts(setIndex) {
   var container = svgContainer.select("#bigCircleGroup");
   var graphGroup = container.selectAll("g.graphGroup").data(dataSets[setIndex]);
   var ggEnter = graphGroup.enter().append("g").attr({
     transform: function(d, i) {
       return "translate(" + (config.width * i) + ",0)";
     },
     class: "graphGroup",
     id: function(d, i) {
       return "bigCircle" + i;
     }
   });

   //Standard, common background arc. Append to enter selection, needs only to be drawn once per graph
   var circleArc = d3.svg.arc().innerRadius(config.circleRad - (config.circleWidth / 2)).outerRadius(config.circleRad + (config.circleWidth / 2)).startAngle(0).endAngle(Math.PI * 2);
   ggEnter.append("path").attr({
     "d": circleArc,
     "transform": "translate(" + (config.circleXCenter) + "," + (config.circleYCenter) + ")",
     "stroke": "none",
     "fill": "#ececec"
   });

   //Label. Group and labels should be drawn once per graph, but updated every time
   ggEnterText = ggEnter.append("text");
   ggEnterText.append("tspan").attr("class", "bigDigit");
   ggEnterText.append("tspan").attr("class", "unit");
   graphGroup.exit().remove(); // No need to update items that will be removed.
   setText(graphGroup.select("text")); // Notice:
     // this applies to newly appended items that were entered
     // and to existing items that were not entered and need updating.

   //Draw arcs here (removed for brevity)
   // [probably need to handle both append and update as labels do]
 }

 function setText(selection) {
   selection = selection.transition();
   selection.attr({
     "x": config.circleXCenter,
     "y": config.circleYCenter,
     "class": "center"
   }).style({
     "text-anchor": "middle",
     "alignment-baseline": "baseline",
     "font-size": "30px",
     "fill": "#5d5d5d"
   });
   selection.select(".bigDigit").style("alignment-baseline", "baseline").text(function(d) {
     return d.text.center;
   });
   selection.select(".unit").style("font-size", "20px").attr("dy", 0).text(function(d) {
     return d.text.unit;
   });
 }


 $(document).ready(function() {
   svgContainer = d3.select("svg");
   $("#set1").click(function() {drawCharts(0);}).click();
   $("#set2").click(function() {drawCharts(1);});
   $("#set3").click(function() {drawCharts(2);});
   $("#set4").click(function() {drawCharts(3);});
 });

.ref {width:100%;padding:1em 5em;}
.ref a{font-family:sans-serif;font-size:2em;text-decoration:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <svg width=450 height=100 style="display:block;">
      <g id="bigCircleGroup"></g>
    </svg>
    <button id="set1">set1</button>
    <button id="set2">set2</button>
    <button id="set3">set3</button>
    <button id="set4">set4</button>
<div class="ref"><a href="https://bl.ocks.org/mbostock/3808218">See Also</a></div>