javascript - D3 v4 中的补间数字不再像 v3 中那样工作

Question

我想弄清楚为什么我的补间数字(向上或向下计数)代码在 D3 的版本 4 中不再起作用。

这是我的代码:

var pieText = svg4.append("text")
    .attr("class", "pieLabel")
    .attr("x", 0)
    .attr("y", 0)
    .text(0)
    .attr("dy", "0.2em")
    .style("font-size", 19)
    .style("fill", "#46596b")
    .attr("text-anchor", "middle");

d3.selectAll(".pieLabel").transition()
  .delay(500)
  .duration(1000)
  .tween("text", function(d) {
    var i = d3.interpolate(this.textContent, d.value);
    return function(t) {
      this.textContent = form(i(t));
    };
  });

console.log 告诉我插值工作正常。那么发生了什么变化？我如何让它发挥作用？

感谢您的帮助。

Answer 1

这里的问题只是内部函数中的 this，它将不再像在 v3 中那样工作。

让我们证明一下。看看这里的控制台，使用 D3 v3，this 是 DOM 元素:

d3.select("p").transition()
  .tween("foo", function(d) {
    var i = d3.interpolate(0, 1);
    return function(t) {
      console.log(this)
    };
  });

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<p></p>

现在是相同的片段，使用 D3 v4...this 现在是 window 对象:

d3.select("p").transition()
  .tween("foo", function(d) {
    var i = d3.interpolate(0, 1);
    return function(t) {
      console.log(this)
    };
  });

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<p></p>

解决方案:在外部函数中保留对this的引用作为变量(传统上命名为self，但这里我将其命名为节点):

d3.selectAll(".pieLabel").transition()
    .delay(500)
    .duration(1000)
    .tween("text", function(d) {
        var node = this;
        //keep a reference to 'this'
        var i = d3.interpolate(node.textContent, d.value);
        return function(t) {
            node.textContent = form(i(t));
            //use that reference in the inner function
        };
    });

这是您的代码，仅进行了更改:

var widthpie = 250,
  heightpie = 300,
  radius = Math.min(widthpie, heightpie) / 2;

var data = [{
  antwort: "A",
  value: 0.5
}, {
  antwort: "B",
  value: 0.4
}];

var form = d3.format(",%");

var body4 = d3.select("#chart1");

var svg4 = body4.selectAll("svg.Pie")
  .data(data)
  .enter()
  .append("svg")
  .attr("width", widthpie)
  .attr("height", heightpie)
  .append("g")
  .attr("transform", "translate(" + widthpie / 2 + "," + heightpie / 2 + ")");

var pieText = svg4.append("text")
  .attr("class", "pieLabel")
  .attr("x", 0)
  .attr("y", 0)
  .text(0)
  .attr("dy", "0.2em")
  .style("font-size", 19)
  .style("fill", "#46596b")
  .attr("text-anchor", "middle");

d3.selectAll(".pieLabel").transition()
  .delay(500)
  .duration(1000)
  .tween("text", function(d) {
    var node = this;
    var i = d3.interpolate(node.textContent, d.value);
    return function(t) {
      node.textContent = form(i(t));
    };
  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart1"></div>

PS:我在代码片段中使用了 Firebug，因为 S.O.片段没有正确记录窗口对象。