Reordering axis seems broken? (or what am I missing here)

[antz29]

I'm building a visulisation of a PCA model and the ability to re-order the axis is fantastic here, but it seems that it's not behaving as I would expect.

Here I have some test data displaying a PCA model with 4 clusters.

When I move axis 1 to the end, it's as if it stay 'attached' to axis 2, so the lines are drawn over the top of the others.

This isn't how the examples behave, and certainly not what I was expecting, so I presume it's me doing something stupid but I have compared the examples and can't see what I'm doing wrong here.

var parcoords = d3.parcoords()("#chart")
  .data(m.getData())
  .smoothness(0.15)  
  .bundleDimension("1")
  .bundlingStrength(0.3)
  .hideAxis(["group"])
  .alpha(0.4)  
  .color((obj) => ({"Guacano" : '#F44336','Vicugna' : '#FF9800','Alpaca' : '#9C27B0','Domestic' : '#00BCD4'}[obj.group]))
  .composite("darker")
  .mode("queue")
  .render()
  .reorderable()
  .alphaOnBrushed(0.2)
  .brushMode("1D-axes");  

The data I'm rendering looks like this:

[
   {
      "1":629,
      "2":397,
      "3":940,
      "4":366,
      "5":959,
      "6":505,
      "7":457,
      "8":279,
      "9":115,
      "10":504,
      "group":"Guacano"
   }
]

What could I be doing wrong here?

[julianheinrich]

I've seen this happening a while ago and thought I fixed it, are you using the latest version on github?

[murphy66]

I noticed this issue as well. The thing is that sortDimensions() doesn't really change the order of the dimensions just sets the index attribute. The drawing in single_path() then loops through dimensions in the wrong order. I could fix the issue by sorting the dimensions by index before drawing the lines but this leads to poor performance.

Here is my quick and dirty fix: https://github.com/murphy66/parallel-coordinates/commit/17052221b6d67145df744f10f52c889a9574289e