syntagmatic / parallel-coordinates

A d3-based parallel coordinates plot in canvas. This library is no longer actively developed.
http://syntagmatic.github.com/parallel-coordinates/
Other
511 stars 212 forks source link

getting old data when using mode("queue") #336

Closed aravindGear4 closed 7 years ago

aravindGear4 commented 7 years ago

When I am using queue mode, If I am updating the parallel coordinates before it finishes to draw the lines. Then along with the new data I am getting the old data too. Here is my code.

function updateParallelCordsEvents(data){
  //clears prevoius graph is any
  if(gtdParacords){
      try{
          gtdParacords.removeAxes();
          gtdParacords.brushReset();
          gtdParacords.render();
      } catch(err){
          console.log("Ignored:"+err);
      }
  }
    var mode="queue";
    if(data.length<100 || !($('#isQueuing').is(':checked'))){
        mode="default";
    }

  gtdParacords = d3.parcoords()("#gtdParacords").composite("darker")
      .data(data).dimensions(dimensions).hideAxis(hideAxes)
    .mode(mode).color(function(d){
      return getEntityColor(d[category]);
    }).margin(marigin)
    .render().shadows().createAxes().brushMode("1D-axes-multi").on("brush",processSelected)
    .reorderable().interactive(); 
}

Here blue lines are from previous update, we can observer that the scale is also not fitting for the old data.

queue issue

But once I click on the any of the axis labels the old data disappear.

aravindGear4 commented 7 years ago

For whomever facing the same issue !

Fixed it with the following changes.

function updateParallelCordsEvents(data){
    setNumDocsPC(data.length);
  //clears prevoius graph is any
  if(gtdParacords){
      try{
          //gtdParacords.removeAxes();
          gtdParacords.brushReset();
          //gtdParacords.render();
      } catch(err){
          console.log("Ignored:"+err);
      }
  }else{
      height = $('#gtdParacords').height() - pcMarigin.bottom - pcMarigin.top;
      scale = d3.scale.linear().domain([0, 1500]).range([0, height]);
      gtdParacords = d3.parcoords()("#gtdParacords").composite("darker");
  }
    var mode="queue";
    if(data.length<100 || !($('#isQueuing').is(':checked'))){
        mode="default";
    }//.dimensions(dimensions)
    //.detectDimensions().dimensions(dimensions).hideAxis(hideAxes)

    //gtdParacords.rate=100;
    gtdParacords.data(data).dimensions(dimensions).hideAxis(hideAxes)
    .mode(mode).color(function(d){
      return getEntityColor(d[category]);
    }).margin(pcMarigin).smoothness(.2).bundlingStrength(.9)
    .alpha(0.4).alphaOnBrushed(1)//Change the opacity of the polylines, also the foreground context's globalAlpha.
    .render().shadows().createAxes()
    .reorderable()//.interactive() // command line mode
  //  gtdParacords.updateAxes()
    //gtdParacords.brushReset()
    //.alphaOnBrushed(0.1).smoothness(.2);
    //1D-axes,1D-axes-multi,2D-strums,angular
    //adding color dynamically
        .brushMode("1D-axes-multi").on("brush",processSelected)
    .svg.selectAll(".dimension")
    .on("click", change_color)
    .selectAll(".label")
    .style("font-size", "14px")
    .style("cursor", "pointer")
    ;
}