Обновить размер и значение нескольких кольцевых диаграмм d3.js

я работаю над проектом, используя JS и d3.js 3.x.

У меня есть силовой макет, в котором каждый узел окружен кольцевой диаграммой.

Теперь я пытаюсь обновить данные и изменить размер узлов и кольцевых диаграмм с переходом, но у меня большие проблемы с функцией arcTween.

Если я создаю переменную дуги, не зависящую от данных, функция arcTween делает то, что должна делать, но не делает этого, если я устанавливаю внешний и внутренний радиус следующим образом:

    var arc = d3.svg.arc()
    .innerRadius(function(d){
        if(d.data.group==1)
            return radiusScale(d.data.value);
    })
    .outerRadius(function(d){
        if(d.data.group==1)
            return radiusScale(d.data.value)+10;
    })
    .cornerRadius(11);

Я пробовал много решений, но ни одно из них не работает.

Вот скрипт с полным кодом: https://jsfiddle.net/56n4fhLg/1/

Спасибо


javascript d3.js data-visualization donut-chart
person Art_Knopfler    schedule 27.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел проблему, я забыл сохранить «d» для каждого pathPie:

    pathPie
    .attr("id", function(d,i) { return "arc_"+d.data.target; })
    .attr("d", function(d, i) {
            var temp = radiusScale(d.data.value);
            arc.innerRadius(temp)(d, i);
            temp += 10;
            return arc.outerRadius(temp)(d, i);
    })
    .each(function(d) {
        this._current = d;
    });

Здесь обновлен код: https://jsbin.com/yosesotuwo/edit?output

person Art_Knopfler    schedule 02.05.2018