0

So I'm playing around with d3.js and nvd3. I am trying to use nvd3 and d3 to make a parallel coordinate plot where it is possible to drag/reorder the different axes. I can make draggable axes using only d3, but, if possible, I'd like to use nvd3 to make this, but as far as I can see there is no way of doing this. I am using angularjs directives to make this. This code creates the chart:

// Extract the dimensions and crate a scale for each dimension.
var data = [];
var tmpArray = [];

for (var i = 0; i < newVal.AnalysisIn.length; i++) {
    data.push(newVal.AnalysisIn[i]);
    tmpArray.push(newVal.AnalysisOut[i]);
}

for (var j = 0; j < data.length; j++) {
    for (var k = 0; k < tmpArray.length; k++) {
        angular.extend(data[j], tmpArray[j]);
    }
}

// Set dimensions of each axis
dimensions = d3.keys(data[0]).filter(function (d) {
    return d !== 'name' && (y[d] = d3.scale.linear()
        .domain(d3.extent(data, function (p) {
        return +p[d];
    }))
        .range([height, 0]));
});

console.log(dimensions);

nv.addGraph(function () {
    var chart = nv.models.parallelCoordinates()
        .margin(margin)
        .height(height)
        .width(width)
        .dimensions(dimensions);

    svg.datum(data)
        .call(chart);

    return chart;
});

This works just fine except I can't drag/reorder the axes and I can't find a way to do this as in this example: http://bl.ocks.org/jasondavies/1341281

Anyone got any idea how to do this? Any help is greatly appreciated!

//Rhanox

George Netu
  • 2,758
  • 4
  • 28
  • 49
Rhanox
  • 1
  • 3

1 Answers1

0

I ended up using the parcoords angular library by Syntagmatic (https://syntagmatic.github.io/parallel-coordinates/). This works like a charm and is easier to use than nvd3 parallel coordinate plots (in my opinion).

Rhanox
  • 1
  • 3