在d3.js

Question

我创建了一个弧，然后在d3.js中使用attrTween进行补间。在补间功能中，一切看起来都很好，当我使用＆＃39;这时，我正确地看到了包含所有属性的路径，包括＆＃39; d＆＃39;路径。

然而，在某些时候，＆＃39; d＆＃39;属性正在从路径中删除，并且它不会呈现。

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

我已经省略了尽可能多的无关紧要的东西。

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

在插入功能中执行控制台登录时，一切看起来都很好。

但是一旦完成所有事情，这就是元素的样子。

可能导致这种情况的原因是什么？

如果我添加一个＆＃39; attr＆＃39;而不是＆＃39; attrTween＆＃39;，它可以正常工作。

Answer 1

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

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

罪魁祸首就是这个

如果有人能够在评论中阐明原因，我会感激不尽，但这是一个如此模糊的问题。