[resolved] Can't seem to have more than 1 continuous looping chart on a page. (5 posts)

  1. nrosquist
    Posted 2 years ago #

    Love the plugin. Just a quick question:

    When there is more than one d3 animation looping on a single post, only the final one loops continuously. Is this something in my code, or a bug in the plugin?

    e.g. add this code a few identical charts to a single post:

    var pointsBig = [    // the original, "wide" set of points
     [480, 200],
     [580, 400],
     [680, 100],
     [780, 300],
     [180, 300],
     [280, 100],
     [380, 400]
    var points = [];    // my new, narrow array of points
    // shrink the x-values by 50%
    var halfX = function (oldArray, newArray) {
        for (var i = 0; i < oldArray.length ; i++) {
            newArray.push( [oldArray[i][0] / 2, oldArray[i][1]] );
    halfX(pointsBig, points);
    var svg = d3.select(".wpd3-138-1").append("svg")
        .attr("width", 960)
        .attr("height", 500);
    var path = svg.append("path")
        .attr("d", d3.svg.line()
        .tension(0) // Catmull–Rom
        .attr("r", 4)
        .attr("transform", function(d) { return "translate(" + d + ")"; });
    var circle = svg.append("circle")
        .attr("r", 13)
        .attr("transform", "translate(" + points[0] + ")");
    function transition() {
          .attrTween("transform", translateAlong(path.node()))
          .each("end", transition);
    // Returns an attrTween for translating along the specified path element.
    function translateAlong(path) {
      var l = path.getTotalLength();
      return function(d, i, a) {
        return function(t) {
          var p = path.getPointAtLength(t * l);
          return "translate(" + p.x + "," + p.y + ")";


    my post


  2. figurebelow
    Plugin Author

    Posted 2 years ago #

    if you reuse a chart twice in the same post each one of them must have different id. This means you should duplicate the tab with the same code and different id:
    d3.select(".wpd3-138-1") and
    d3.select(".wpd3-138-2") for the second.

    This is not a bug: the svg generated by D3 is created inside one HTML div, therefore if you want to duplicate a chart a second container div must be created.

    Nice post by the way ;-)

  3. nrosquist
    Posted 2 years ago #

    Even when I give each one its own its own id, only the last one keeps looping.

    See this page.

    I'm wondering if this is something about d3 I don't understand, or an issue with the plugin.

    Thanks for the response and the help.

  4. figurebelow
    Plugin Author

    Posted 2 years ago #


    this may be a problem related to another recent post.
    It could be an issue that appears when a chart is reused multiple times, there may be a problem with the duplicated variables between charts.
    If it is a plugin issue the problem should disappear making sure that each chart has its own variable names.
    Anyway I'm investigating this, multiple chart reusal is a new world for me ;-).


  5. figurebelow
    Plugin Author

    Posted 1 year ago #

    Hi nrosquist,

    I checked your link and I was able to reproduce your issue in my dev setup.
    Although both charts appear the first loop stops iterating but I guess it may be a problem regarding the D3 library more that the Wp-D3 plugin.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Wp-D3
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic