D3 path.transition不是函数

Question

因此，我有一个饼图，说明所有过渡都不会对它们不是函数的消息起作用。当我在控制台中挖掘时，这是正确的。 window.d3具有过渡功能，但不具有d3.selectAll（'path'）。transition

我有点茫然，为什么这不起作用。显然我选择进行过渡是错误的，但是如何？

    (function(d3) {
        'use strict';

        var tooltip = d3.select('body')
            .append('div')
            .attr('class', 'pie-tooltip')
            .style("opacity", 0);

        /**
         * Width and height has to be the same for a circle, the variable is in pixels.
         */

        var width = 350;
        var height = 350;
        var radius = Math.min(width, height) / 2;

        /**
         * D3 allows colours to be defined as a range, beneath is input the ranges in same order as our data set above. /Nicklas
         */

        var color = d3.scaleOrdinal()
            .range(['#ff875e', '#f6bc58', '#eae860', '#85d280']);

        var svg = d3.select('#piechart')
            .append('svg')
            .attr('width', width+20)
            .attr('height', height+20)
            .append('g')
            .attr('transform', 'translate(' + ((width+20) / 2) +
                ',' + ((height+20) / 2) + ')');

        var arc = d3.arc()
            .innerRadius(0)
            .outerRadius(radius);

        /**
         * bArc = biggerArc, this is the arc with a bigger outerRadius thats used when a user mouseovers.
         */

        var bArc = d3.arc()
            .innerRadius(0)
            .outerRadius(radius*1.05);

        var pie = d3.pie()
            .value(function(d){
                return d.value;
            })
            .sort(null);


        var path = svg.selectAll('path')
            .data(pie(data))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d) {
                return color(d.data.color);
            });

            path.transition()
                .duration(600)
                .attrTween("d", makePieAnimation);

            path.on("mouseover", function(d){
                d3.select(this)
                    .attr("width", width+10)
                    .attr("height", height+10);

                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9)
                    .style("display", null)
                    .text(d.data.label + ": " + d.data.value);

                d3.select(this).transition()
                    .duration(300)
                    .style('fill', d.data.highlight).attr("d", bArc);

            });

            path.on("mousemove", function(){
                tooltip.style("top", (event.pageY-10)+"px")
                    .style("left",(event.pageX+10)+"px");
            });

            path.on("mouseout", function(d){
                d3.select(this).style('fill', d.data.color);
                tooltip.transition()
                    .duration(300)
                    .style("opacity", 0);
                d3.select(this).transition()
                    .duration(300)
                    .attr("d", arc);

            });

        /**
         * makePieAnimation() animates the creation of the pie, setting startangles to 0, interpolating to full circle on creation in path.transition. D3 magic.
         * b is an array of arc objects.
         */

        function makePieAnimation(b) {
            b.innerRadius = 0;
            var angles = d3.interpolate({startAngle: 0, endAngle: 0}, b);
            return function(t) {
                return arc(angles(t));
            };
        }

    })(window.d3);


    $.each(data, function (index, value) {
        $('#legend').append('<span class="label label-legend" style="background-color: ' + value['color'] + '">' + value['label'] + ': ' + value['value'] + '</span>');
    });

编辑：

深入研究Ive之后，发现typo3使用的d3文件是手动编辑的：https://forge.typo3.org/issues/83741

我看不到这如何影响此问题，但确实如此。在d3 v4.12.2中使用CDN时，错误消失。