Обновление графика в реальном времени с помощью D3js

Question

В настоящее время я пытаюсь создать кольцевую диаграмму (источник показан ниже), которая может собирать данные и обновлять их в режиме реального времени. Я могу сделать рандомизированные данные, используя math.random(), как показано в функции setInterval(). Проблема в том, что график не обновляется соответствующим образом (график не меняет свою форму соответственно). Я понимаю, что это как-то связано с arctween, однако я сталкиваюсь с проблемой внесения изменений. Пожалуйста, помогите мне. Любая помощь высоко ценится. Я немного новичок в D3js на самом деле.

var dataset = [
    { name: 'Smooth', percent: 40.00, class: 'custom-normal' },
    { name: 'Moderate', percent: 10.00, class: 'custom-warning' },
    { name: 'Heavy', percent: 50.00, class: 'custom-danger' }
];


var w = 300, //width of graphics
    h = 300; //height of graphics

var outerRadius = w / 2;
var innerRadius = 100;

var color = d3.scaleOrdinal().range(["#605A4C", "#EF9309", "B20000"]); 

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

var chart = d3.select("#chart")
    .append("svg:svg")
    .attrs({
        width: w,
        height: h,
        class: 'shadow',
    }).append('g')
    .attrs({
        transform: 'translate(' + w / 2 + ',' + h / 2 + ')'
    });
   

var indicatorDraw = function(d) {
    var pie = d3.pie()
        .value(function(d) {
            console.log("this is d.percent: " + d.percent);
            return d.percent
        })
        .sort(null)
        .padAngle(.03); //padding width (gap between 2 petal)


    var path = chart.selectAll('path')
        .data(pie(dataset))
        .enter()
        .append('svg:path')
        .attrs({
            d: arc,
            class: function(d, i) {
                console.log()
                return d.data.class;
            },
            /*adding a class*/
            fill: function(d, i) {
                console.log("top i" + i);
                return color(d.data.name);
            }
        });

    path.transition()
        .duration(1000)
        .attrTween('d', function(d) {
            var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);//initial animation from 0 to 0 (a circular path)
            return function(t) {
                return arc(interpolate(t));
            };
        });

    //text labeling
    var restOfTheData = function() {
        var text = chart.selectAll('text')
            .data(pie(dataset))
            .enter()
            .append("svg:text")
            .transition()
            .duration(200)
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("dy", ".4em")
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.data.percent + "%";
            })
            .styles({
                fill: '#fff',
                'font-size': '10px'
            });

        var legendRectSize = 20;
        var legendSpacing = 7;
        var legendHeight = legendRectSize + legendSpacing;


        var legend = chart.selectAll('.legend')
            .data(color.domain())
            .enter()
            .append('svg:g')
            .attrs({
                class: 'legend',
                transform: function(d, i) {
                    console.log(i);
                    console.log(d);
                    //Just a calculation for x & y position
                    return 'translate(-45,' + ((i * legendHeight) - 40) + ')';

                }
            });
        legend.append('rect')
            .attrs({
                width: legendRectSize,
                height: legendRectSize,
                rx: 20,
                ry: 40
            })
            .styles({
                fill: color,
                stroke: color
            });

        legend.append('text')
            .attrs({
                x: 30,
                y: 15
            })
            .text(function(d) {
                return d;
            }).styles({
                fill: ' #C0C0C0',
                'font-size': '16px'
            });
    };

    setTimeout(restOfTheData, 1000);
}

setInterval(function() {
    var data = dataset.map(function(d, i) {
        for (var key in d) {
            if (d[key] === "Smooth") {
                //console.log("smooth");
                dataset[0].percent = Math.floor(Math.random() * 100);
            } else if (d[key] === "Moderate") {
                //console.log("moderate");
            } else if (d[key] === "Heavy") {
                //console.log("heavy");
            }
        }
        
    });
    indicatorDraw(data);
    //console.log("this is data element (d): "+ d + " and this is data index (i): " + i);
    //the .map function will map the entire array to the function for any subsequent computation
    //console.log(data);
}, 1500);

body {
    background-color: #A09383;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.widget {
    position: absolute;
    /*margin: 0 auto;
    width: 350px;
    margin-top: 50px;
    background-color: #A09383;
    border-radius: 5px;*/
}

.header {
    background-color: #29384D;
    height: 40px;
    color: #929DAF;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px #06060d;
    z-index: 10;
    cursor: move;
}

.chart-container {
    padding: 25px;
}

.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .5));
    filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .5));
}

@-webkit-keyframes glowingDanger {
    0% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
    50% {
        background-color: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000 !important;
    }
    100% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }

    0% {
        fill: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
    50% {
        fill: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000 !important;
    }
    100% {
        fill: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
}

@-moz-keyframes glowingDanger {
    0% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
    50% {
        background-color: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000 !important;
    }
    100% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }

    0% {
        fill: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
    50% {
        fill: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000 !important;
    }
    100% {
        fill: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
}

@-o-keyframes glowingDanger {
    0% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
    50% {
        background-color: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000 !important;
    }
    100% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }

    0% {
        fill: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
    50% {
        fill: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000 !important;
    }
    100% {
        fill: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000 !important;
    }
}

@keyframes glowingWarning {
    0% {
        background-color: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
    50% {
        background-color: #FF9900;
        -webkit-box-shadow: 0 0 40px #FF9900 !important;
    }
    100% {
        background-color: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }

    0% {
        fill: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
    50% {
        fill: #FF9900;
        -webkit-box-shadow: 0 0 40px #FF9900 !important;
    }
    100% {
        fill: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
}

@-webkit-keyframes glowingWarning {
    0% {
        background-color: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
    50% {
        background-color: #FF9900;
        -webkit-box-shadow: 0 0 40px #FF9900 !important;
    }
    100% {
        background-color: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }

    0% {
        fill: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
    50% {
        fill: #FF9900;
        -webkit-box-shadow: 0 0 40px #FF9900 !important;
    }
    100% {
        fill: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
}

@-moz-keyframes glowingWarning {
    0% {
        background-color: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
    50% {
        background-color: #FF9900;
        -webkit-box-shadow: 0 0 40px #FF9900 !important;
    }
    100% {
        background-color: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }

    0% {
        fill: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
    50% {
        fill: #FF9900;
        -webkit-box-shadow: 0 0 40px #FF9900 !important;
    }
    100% {
        fill: #EF9309;
        -webkit-box-shadow: 0 0 3px #EF9309 !important;
    }
}

@-o-keyframes glowingNormal {
    0% {
        background-color: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
    50% {
        background-color: #938D7D;
        -webkit-box-shadow: 0 0 40px #938D7D !important;
    }
    100% {
        background-color: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }

    0% {
        fill: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
    50% {
        fill: #938D7D;
        -webkit-box-shadow: 0 0 40px #938D7D !important;
    }
    100% {
        fill: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
}

@keyframes glowingNormal {
    0% {
        background-color: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
    50% {
        background-color: #938D7D;
        -webkit-box-shadow: 0 0 40px #938D7D !important;
    }
    100% {
        background-color: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }

    0% {
        fill: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
    50% {
        fill: #938D7D;
        -webkit-box-shadow: 0 0 40px #938D7D !important;
    }
    100% {
        fill: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
}

@-webkit-keyframes glowingNormal {
    0% {
        background-color: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
    50% {
        background-color: #938D7D;
        -webkit-box-shadow: 0 0 40px #938D7D !important;
    }
    100% {
        background-color: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }

    0% {
        fill: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
    50% {
        fill: #938D7D;
        -webkit-box-shadow: 0 0 40px #938D7D !important;
    }
    100% {
        fill: #605A4C;
        -webkit-box-shadow: 0 0 3px #605A4C !important;
    }
}


.custom-danger {
    -webkit-animation: glowingDanger 1500ms infinite !important;
    -moz-animation: glowingDanger 1500ms infinite !important;
    -o-animation: glowingDanger 1500ms infinite !important;
    animation: glowingDanger 1500ms infinite !important;
}

.custom-warning {
    -webkit-animation: glowingWarning 1500ms infinite !important;
    -moz-animation: glowingWarning 1500ms infinite !important;
    -o-animation: glowingWarning 1500ms infinite !important;
    animation: glowingWarning 1500ms infinite !important;
}

.custom-normall {
    -webkit-animation: glowingNormal 1500ms infinite !important;
    -moz-animation: glowingNormal 1500ms infinite !important;
    -o-animation: glowingNormal 1500ms infinite !important;
    animation: glowingNormal 1500ms infinite !important;
}

<div id="mydiv" class="widget">
    <div id="mydivheader" class="header">Indicator</div>
    <div id="chart" class="Chart chart-container"></div>
</div>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>