four four - 5 months ago 8
Javascript Question

Edit the data in a pie chart rather than create a new one

I have a

div
and a pie chart.
Each time the user moves the mouse over the
div
, the code create a new pie chart.
What I would like is not to create a new chart, but change the data of the existing one.

Code here.

I tried to create the html tag and then change the data but that creates problems with
arc
that I can't able to solve.

Obviously, the example is very simple and stupid, but it's just to make you understand what I'm trying to do.
How can I do? What is the right way to proceed?

Thank you

Answer
var svg = d3.select("#tooltip-chart")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")");

Your code is just appending new svg´s to the tooltip-chart div. Delete the old one first:

var svg = d3.select("#tooltip-chart")
    .html("")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")");

.html("") will remove the childrens of the div.