Question

我尝试使用动画和交互性在D3.js和ES6上创建自己的图表库。

我的问题是绘制饼图需要一些补间函数才能很好地为饼图设置动画。我尝试用ES6编写那些补间函数。

我的图表结构如下所示：

class PieChart {
    constructor({w, h} = {}) {
        this.w = w;
        this.h = h;

        ...

        this.onInit();
    }

    onInit() {
        this.radius = Math.min(this.w, this.h) / 2;

        this.arc = d3.arc()
            .innerRadius(this.radius - 20)
            .outerRadius(this.radius);

        this.pie = d3.pie();

        ...

        this.svg = d3.select("#id")
                .append("svg")
                .attr("width", this.w)
                .attr("height", this.h)

        this.drawChart();
    }

    drawChart() {
        this.arcs = this.svg.append("g")
            .attr("transform", `translate(${this.w / 2}, ${this.h / 2})`)
            .attr("class", "slices")
                .selectAll(".arc")
                .data(this.dataset)
                .enter()
                .append("path")
                    .attr("d", this.arc)
                    .each(function(d) { this._current = d; });

        ...

        const curryAttrTween = function() {
            let outerArc = this.arc;
            let radius = this.radius;

            return function(d) {                // <- PROBLEM: This inner function is never called
                this._current = this._current || d;
                let interpolate = d3.interpolate(this._current, d);
                this._current = interpolate(0);
                return function(t) {
                    let d2 = interpolate(t);
                    let pos = outerArc.centroid(d2);
                    pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
                    return `translate(${pos})`;
                }
            }
        };

        let labels = this.svg.select(".label-name").selectAll("text")
            .data(this.pie(this.dataset), "key");

        labels
            .enter()
            .append("text")
                .attr("dy", ".35em")
                .attr("class", "text")
                .text((d) => `${d.data.column}: ${d.data.data.count}`);

        labels
            .transition()
            .duration(666)
            .attrTween("d", curryAttrTween.bind(this)());

        labels
            .exit()
            .remove();    
    }
}

我也尝试过：

drawChart() {
    ...

    const attrTween = function(d) {
        this._current = this._current || d;            // <- PROBLEM: Can't access scope 'this'
        let interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            let d2 = interpolate(t);
            let pos = this.arc.centroid(d2);
            pos[0] = this.radius * (midAngle(d2) < Math.PI ? 1 : -1);
            return `translate(${pos})`;
        }
    }

    labels
        .transition()
        .duration(666)
        .attrTween("d", (d) => attrTween(d));

    ...
}

我终于尝试了：

drawChart() {
    ...

    labels
        .transition()
        .duration(666)
        .attrTween("d", function(d) {
            this._current = this._current || d;
            let interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                let d2 = interpolate(t);
                let pos = this.arc.centroid(d2);                                // <- PROBLEM: Can't access this.arc
                pos[0] = this.radius * (midAngle(d2) < Math.PI ? 1 : -1);       // <- PROBLEM: Can't access this.radius
                return `translate(${pos})`;
            }
        });

    ...
}

以上所有方法都失败了。我指出了我的代码中的问题，我不确定是否以及如何在ES6中完成此任务。

Answer 1

虽然您的answer有效，但它是 pre-ES6 解决方案的一个示例，您可以使用闭包const self = this;捕获外部this范围。这有点像躲避你自己的问题，要求ES6解决方案。

ES6替代此方法的方法是使用arrow function代替。箭头函数的一个好处是，它们从定义的封闭范围（词法）中选择它们的this，而传统函数有自己的this阻止您访问外部范围。这使得箭头函数作为OOP中使用的回调特别有用，您希望在回调中访问实例的属性。

您可以轻松地重写代码以使用此功能：

drawChart() {
  //...

  // Use arrow function to lexically capture this scope.
  const interpolator = t => {
    let d2 = interpolate(t);
    let pos = this.arc.centroid(d2);
    pos[0] = this.radius * (midAngle(d2) < Math.PI ? 1 : -1);
    return `translate(${pos})`;
  };

  labels
    .transition()
    .duration(666)
    .attrTween("d", function(d) {
      this._current = this._current || d;
      let interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return interpolator;
    });

  //...
}

注意，这仍然使用普通函数作为提供给.attrTween()的插值工厂回调，因为此函数依赖于this绑定到当前的DOM元素迭代而不是外部范围。

进一步阅读：Chapter 13. Arrow Functions来自Axel Rauschmayer博士的优秀书籍Exploring ES6。

Answer 2

由于我无法对已接受的answer发表评论（声誉不够:(））我只是想指出新创建的内部函数（插值器）赢了＆＃ 39;可以访问 attrTween 中声明的插值：

drawChart() {
  //...

  // Use arrow function to lexically capture this scope.
  const interpolator = t => {
    let d2 = interpolate(t);                                     // <-- Reference Error
    let pos = this.arc.centroid(d2);
    pos[0] = this.radius * (midAngle(d2) < Math.PI ? 1 : -1);
    return `translate(${pos})`;
  };

  labels
    .transition()
    .duration(666)
    .attrTween("d", function(d) {
      this._current = this._current || d;
      let interpolate = d3.interpolate(this._current, d);       // <-- Declared here
      this._current = interpolate(0);
      return interpolator;
    });

  //...
}

ps。我找到了：

const self = this;

在这种情况下是一个很好的解决方案，因为它更容易阅读和推理，即使它不是最好的 ES6 方式。

Answer 3

我只想发布解决方案，我是在@RyanMorton的帮助下找到的，以供将来自我使用。

解决方案是定义变量const self = this;。这样我们就可以在匿名函数中访问ES6的this。

drawChart() {
    ...

    const self = this;
    labels
        .transition()
        .duration(666)
        .attrTween("d", function(d) {
            this._current = this._current || d;
            let interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                let d2 = interpolate(t);
                let pos = self.arc.centroid(d2);
                pos[0] = self.radius * (midAngle(d2) < Math.PI ? 1 : -1);
                return `translate(${pos})`;
            }
        });

    ...
}

使用ES6

3 个答案: