CODEWITHSUNDEEP
javascriptd3.js
whytheq
whytheq

Reputation: 35605

Trying to analyse why this transition is not happening

I have the following adapted d3.js visual and I'm unable to work out why the transition does not fire. The ars should rotate around to different sizes when the radio button is clicked.

It seems that clicking the radio button is changing the titles of the arc (if I hover the cursor over each)

Is this section of code to blame?

// check if svg group already exists
var svg = d3.select("#sunGroup");
if (svg.empty()) {
  var svg = d3.select("#sunBurst")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr({
      'transform': "translate(" + width / 2 + "," + height * .52 + ")",
      id: "sunGroup"
    });
}

Here is the full (not) working example:

https://plnkr.co/edit/hpvREU?p=preview

This is the transition I'm trying to hold onto: plnkr.co/edit/NnQUAp?p=preview What I trying to do is move the logic at line 128 (starting d3.selectAll("input").on("change", function change() {...) out of this function

Upvotes: 0

Views: 38

Answers (1)

mdml
mdml

Reputation: 22912

An easy fix to your problem is to remove all children of the SVG whenever you switch data types:

d3.select("#sunBurst").selectAll('*').remove()

That way, you are binding the new data to new elements. You can also remove the svg.empty() and d3.select('#sunGroup') code. This simple fix lets you switch between pie charts, and is in the spirit of the code you currently have. Here's the users pie chart.

users pie chart

However, this may not be the best way to do what you're trying to achieve. As a reference, see Mike Bostock's General Update Pattern series (link is to first in the series) for how to update your SVG.

Upvotes: 1

Related Questions