d3 / d3-transition

Animated transitions for D3 selections.
https://d3js.org/d3-transition
ISC License
223 stars 65 forks source link

Example for transition() isn't correct in READ.ME? #137

Closed tobradex closed 1 year ago

tobradex commented 1 year ago

Hey there. We are using radial cluster example in our project, but when we try to apply the transition and looking this example in the READ.ME, the things goes wrong. I'm attaching the picture from the console with the errors. I assume that the example isn't the correct one. Can you confirm that the working variant from our example is the correct usage in this case or we are missing something?

// Example from Read.me
const t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");
// Our code - which produce above error
    const t = d3
      .transition()
      .duration(animate ? 400 : 0)
      .ease(d3.easeLinear)
      .on("end", () => {
        const box = svg.node().getBBox();

     svg
        .transition()
        .duration(1000)
        .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);
     });

    const allLinks = linkgroup.selectAll("path");
    allLinks.transition(t).attr(
      "d",
      d3
        .linkRadial()
        .angle((d) => d.x)
        .radius((d) => d.y),
    );
// Our code - working variant
    d3
      .transition()
      .duration(animate ? 400 : 0)
      .ease(d3.easeLinear)
      .on("end", () => {
        const box = svg.node().getBBox();

     svg
        .transition()
        .duration(1000)
        .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);
     });

    const allLinks = linkgroup.selectAll("path");
    allLinks.transition().attr(
      "d",
      d3
        .linkRadial()
        .angle((d) => d.x)
        .radius((d) => d.y),
    );

image

Fil commented 1 year ago

I've reproduced the README example in this notebook: https://observablehq.com/@recifs/d3-transition-readme-example--support ; it also shows in which case we throw that error (basically, when the transition has ended before we try and use it). Hope this helps.

tobradex commented 1 year ago

Oh, Sorry for inconvenience then and thx for the clarification :)