d3.js + nvd3 平行坐标可拖动轴
d3.js + nvd3 parallel coordinate draggable axes
所以我在玩 d3.js 和 nvd3。我正在尝试使用 nvd3 和 d3 制作平行坐标图,其中可以 drag/reorder 不同的轴。我可以只使用 d3 制作可拖动轴,但是,如果可能的话,我想使用 nvd3 来制作它,但据我所知,没有办法做到这一点。我正在使用 angularjs 指令来做到这一点。此代码创建图表:
// 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;
});
这很好用,除了我不能 drag/reorder 轴而且我找不到方法来做到这一点,如本例所示:http://bl.ocks.org/jasondavies/1341281
有人知道怎么做吗?非常感谢任何帮助!
//Rhanox
我最终使用了 Syntagmatic (https://syntagmatic.github.io/parallel-coordinates/) 的 parcoords angular 库。这就像一个魅力,比 nvd3 平行坐标图更容易使用(在我看来)。
所以我在玩 d3.js 和 nvd3。我正在尝试使用 nvd3 和 d3 制作平行坐标图,其中可以 drag/reorder 不同的轴。我可以只使用 d3 制作可拖动轴,但是,如果可能的话,我想使用 nvd3 来制作它,但据我所知,没有办法做到这一点。我正在使用 angularjs 指令来做到这一点。此代码创建图表:
// 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;
});
这很好用,除了我不能 drag/reorder 轴而且我找不到方法来做到这一点,如本例所示:http://bl.ocks.org/jasondavies/1341281
有人知道怎么做吗?非常感谢任何帮助!
//Rhanox
我最终使用了 Syntagmatic (https://syntagmatic.github.io/parallel-coordinates/) 的 parcoords angular 库。这就像一个魅力,比 nvd3 平行坐标图更容易使用(在我看来)。