用ES6绘制派图

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

由于我不能评论已接受的回答 (声誉不足:( ))，我只想指出，新创建的内部函数回答将无法访问在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 2

尽管您的回答可以工作，但它是预ES6解决方案的一个示例，您可以在其中使用闭包const self = this;来捕获外部this作用域。在某种程度上，这就像是在回避你自己的问题，这个问题要求一个ES6解决方案。

这种方法的ES6替代方法是使用箭头函数代替。箭头函数的一个好处是，它们从它们定义的封闭作用域(词法)中选择它们的this，而传统函数有自己的this，阻止您访问外部作用域。这使得箭头函数作为OOP中使用的回调特别有用，在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元素，而不是外部作用域。

进一步阅读：http://exploringjs.com/es6/ch_arrow-functions.html来自于阿克塞尔·劳施梅耶博士的优秀著作“http://exploringjs.com/es6.html”。

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})`;
            }
        });

    ...
}