D3 path.transition не является функцией - PullRequest
0 голосов
/ 05 сентября 2018

Итак, у меня есть круговая диаграмма, на которой не будут работать все переходы с сообщением о том, что они не являются функцией. Что верно, когда я копаюсь в консоли. В 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>');
    });

РЕДАКТИРОВАТЬ:

После копания я обнаружил, что файл d3, используемый typo3, редактируется вручную: https://forge.typo3.org/issues/83741

Я не вижу, как это влияет на эту проблему, но это так. При использовании CDN с d3 v4.12.2 ошибка исчезает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...