在 d3.js 中的 attrTween 之后，路径的 d 属性被删除答案

【问题标题】：Path's d attribute is being removed after attrTween in d3.js在 d3.js 中的 attrTween 之后，路径的 d 属性被删除
【发布时间】：2015-11-01 15:02:21
【问题描述】：

我创建了一个弧，然后在 d3.js 中使用 attrTween 进行补间。在补间函数内部，一切看起来都很好，当我使用“this”时，我看到的路径具有正确的所有属性，包括“d”路径。

然而，在某些时候，'d' 属性会从路径中移除，并且不会呈现。

在调试时，有几次我看到弧正确渲染并在调试完成后保持渲染，但我无法拦截可能导致问题的原因。

我已经尽可能多地省略了我能想到的不相关的东西。

leftInnerArc = group.selectAll("path.goalchart-left-inner")
        .data([data]);

    leftInnerArc.enter()
        .append("path")
        .attr("class", "goalchart-left-inner")
        .attr("endAngle", function (d) {
            return goalChartArcAngles.leftBottom;
        })

        .attr("data-arcType", "leftInner")
        .style({
            "fill": fill,
            "stroke": stroke,
            "stroke-width": strokeWidth
        });

    leftInnerArc.transition()
        .duration(250)
        .attrTween("d", tweenAttrArc);

function tweenAttrArc(d, i) {
        var arcType = d3.select(this).attr("data-arcType");
        var currentGoal;
        var currentActual;
        var isreversed;

        switch (arcType) {
            case "leftInner":
                currentGoal = d.leftGoal;
                currentActual = d.leftInnerActual;
                isreversed = false;
                break;
            ...
        }
        var previousEndAngle = d3.select(this).attr("endAngle");
        var currentEndAngle = goalChartArcAngles.percent(currentActual, currentGoal, isreversed);

        var interpolator = d3.interpolate(previousEndAngle, currentEndAngle);
        previousEndAngle = currentEndAngle;

        return function (t) {
            return createArc(goalChartArcAngles.leftBottom, interpolator(t), innerArcRadius, innerArcRadius + innerArcWidth)();
        };
    }

function createArc(startAngle, endAngle, innerRadius, outerRadius) {
        return d3.svg.arc()
            .startAngle(startAngle)
            .endAngle(endAngle)
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);
    };

在插值函数中进行控制台日志时，一切看起来都很好。

但是一旦一切都完成了，这就是元素的样子。

这可能是什么原因造成的？

如果我添加一个“attr”而不是“attrTween”，它就可以正常工作。

【问题讨论】：

createArc 函数返回 d3.svg.arc 函数。调用返回的函数是将函数分配给“d”属性和路径字符串之间的区别。我需要路径字符串。
我认为问题在于我在闭包中分配的节点与在 dom 中创建的节点不同。我还不确定那是怎么回事，但我正在尝试调试它。

标签： d3.js

【解决方案1】：

我遇到的问题似乎源于我选择一个 div 作为基本插入点，该 div 也被用作 ui-view。我不确定为什么这只会导致路径元素的 d 属性出现问题，并且仅导致 attr tween 出现问题，但是将其指向不同的插入点可以解决问题。

var chart = goalChart(d3.select("div.content"))

罪魁祸首是这个

如果有人能够在 cmets 中阐明为什么会这样，我将不胜感激，但这是一个难以解决的问题。

【讨论】：