d3：画一次孩子，但每次都要更新

时间：2016-06-08 15:47:17

标签： javascript d3.js

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

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

然而，当我按var centerTextGroup = ggEnter.append("text")替换var centerTextGroup = graphGroup.append("text")时，drawChart会绘制一个新文本组元素，我也不想这样做。

如何解决此问题并使drawCharts正确更新tspans？

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

＆＃13;
＆＃13; 
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": "%"
      }
    }, ]);
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

因此，对于更改的数据，enter适用于新数据点。有一个比喻update可以应用于enter之前的已更改数据点，或often the case，适用于新enter ed和现有数据点＆＃39;元素，最后exit适用于已删除的数据点。所以它会变得有点复杂但是如果你可以清理并重用你在进入update后enter步之后设置数据的方式，你可以得到更多符合d3的方法正在努力帮助您编写数据驱动的文档。还有一些方法可以使用d3和没有jquery来启用点击功能，但是我假设页面的其他部分使用jquery，因此它实际上对你免费。

＆＃13;
＆＃13; 
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);});
 });
＆＃13; 
.ref {width:100%;padding:1em 5em;}
.ref a{font-family:sans-serif;font-size:2em;text-decoration:none;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

D3方式是：

1 - enter - incoming elements, entering the stage.
2 - update - persistent elements, staying on stage.
3 - exit - outgoing elements, exiting the stage.

您需要更新。这就是为什么你必须删除并重新创建以更新

看看这个：Three Little Circles

相关问题
最新问题