Support » Plugin: Wp-D3 » Can't seem to have more than 1 continuous looping chart on a page.

  • Resolved nrosquist

    (@nrosquist)


    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:

    //1
    
    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")
        .data([points])
        .attr("d", d3.svg.line()
        .tension(0) // Catmull–Rom
        .interpolate("cardinal-closed"));
    
    svg.selectAll(".point")
        .data(points)
      .enter().append("circle")
        .attr("r", 4)
        .attr("transform", function(d) { return "translate(" + d + ")"; });
    
    var circle = svg.append("circle")
        .attr("r", 13)
        .attr("transform", "translate(" + points[0] + ")");
    
    transition();
    
    function transition() {
      circle.transition()
          .duration(10000)
          .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 + ")";
        };
      };
    }

    Thanks!

    my post

    https://wordpress.org/plugins/wp-d3/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Ruben

    (@figurebelow)

    Hi,
    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 😉

    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.

    Plugin Author Ruben

    (@figurebelow)

    Hi,

    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 ;-).

    Thanks!

    Plugin Author Ruben

    (@figurebelow)

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can't seem to have more than 1 continuous looping chart on a page.’ is closed to new replies.