CODEWITHSUNDEEP
javascriptd3.jsd3pie.js
Aenaon
Aenaon

Reputation: 3573

error on data update with a d3pie.js piechart

I am trying to update a piechart from d3pie.js library however there must be something basic I am missing.

I have two scripts which look the same to me with the only difference being that the update happens via a button press whereas in the other happens on the fly, while the page loads up. I also got an error with the second script Uncaught TypeError: Cannot read property 'value' of undefined. I do get a chart, it is just the wrong one; Instead of 2 slices, get 3 (2 with the same color). The pullOutSegmentevent also doesnt work, so something is really messed-up with the piechart. The pie object looks to be different and maybe this is why the 2nd script fails but I have no idea to get the correct one. Its been doing my head since yesterday. The scripts are inluded below, the first one is the working code, the second the failed one.

Any help highly appreciated!

<html>
<head></head>
<body>

<input type="button"; value="Add Data"; id="addData" />
<div id="pie"></div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/d3pie/d3pie.min.js"></script>



<script>
function piechartData() {
    var data = [
        {label: "1", value: 1},
        {label: "2", value: 4},
        {label: "3", value: 3}
    ];

    var pie = new d3pie("pie", {
        data: {
            content: data
        }
    });

    return pie
};
</script>

<script>


    // create a piechart
    pie = piechartData();

    $(function() {

        //clear the data
        data = [];
        $("#addData").on("click", function() {

            //when button pressed push these and update the piechart
            data.push({"label": "4", "value": 8});
            data.push({"label": "51", "value": 3});;

            pie.updateProp("data.content", data);
        });
    });

</script>



</body>
</html>

<html>
<head></head>
<body>

<div id="pie"></div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/d3pie/d3pie.min.js"></script>

<script>
    function piechartData() {
        var data = [
            {label: "1", value: 1},
            {label: "2", value: 4},
            {label: "3", value: 3}
        ];

        var pie = new d3pie("pie", {
            data: {
                content: data
            }
        });

        return pie
    };
</script>

<script>

    // make a piechart
    pie = piechartData();

    //create new data and update the piechart
    data = [];
    data.push({"label": "4", "value": 8});
    data.push({"label": "51", "value": 3});

    pie.updateProp("data.content", data);



</script>


</body>
</html>

Upvotes: 0

Views: 234

Answers (1)

rioV8
rioV8

Reputation: 28653

The second example clears the content of the svg (updateProp) but not all the transitions. They still live inside d3.

If you wait till the initial animation is finished 

setTimeout(() => {
    data = [];
    data.push({"label": "4", "value": 8});
    data.push({"label": "51", "value": 3});

    pie.updateProp("data.content", data);
}, 5000);

It all works.

I don't know if there is an easy way to get a callback when d3pie is finished with all the animations.

Upvotes: 1

Related Questions