Use of selected() function
Closed this issue · 7 comments
Hi,
I'm trying to use pc.selected() to return all data within brush extents ("1d-axes"). For example,
var pc = ParCoords()("#example")
.data([
[0,-0,0,0,0,1],
[1,-1,1,2,1,1],
[2,-2,4,4,0.5,1],
[3,-3,9,6,0.33,1],
[4,-4,16,8,0.25,1]
])
.alpha(0.4)
.render()
.shadows()
.reorderable()
.brushMode("1D-axes"); // enable brushing
.on("brushend", function(brushed) {
console.log(pc.selected());
});
However, I get a "TypeError: pc.selected is not a function"
Am I using this function correctly? If not, how else could I obtain all data within the brush extents as an array? Apologies if the solution is obvious, I'm still new to Javascript. Thanks!
Hi Josh,
There is no selected function. To get data within brush extents, you may use:
.on("brushend", function(brushed) {
console.log(brushed);
// or
console.log(pc.brushed());
});
Please never worry about your Javascript skills (How can a man know everything?) You're always welcomed to submit issues here.
Thanks for the quick reply!
My issue with that method is I'm using pc.brushed(new_array) to manually edit what is brushed, and I need a separate method to simultaneously obtain what is actually in the brush extents.
On line 167 of parcoords.js I'm seeing:
// data within extents
var selected = function selected(state, config, brushGroup)and on line 3092 as a part of the ParCoords function:
pc.selected = selected$4(config);There is also a file for this selected function in the api folder.
This selected function is part of what makes pc.brushed() possible correct? Is it the case that it's just not available in the general api? If so, could it be made usable? Cheers!
This is indeed a bug. pc.selected() now has been exposed as api.
Version 2.1.0 has been released with the bug-fix.
pc.brushed can be used in two ways:
pc.brushed(...) // called with arguments, will manually *set* brush
pc.brushed() // without any argument, will get *brush* extents
This is a dream come true! The only thing I'm noticing here is that pc.selected() will return the entire data set when no axes are brushed. Since nothing is actually selected, wouldn't we want to return an empty array in this case?
Another strange thing happens when working with two ParCoords variables:
var pc1 = ParCoords()("#plot01")
.alpha(0.4)
var pc2 = ParCoords()("#plot02")
.alpha(0.4)
// load csv file and create the chart
d3.csv('data/cars.csv').then(function(data) {
pc1
.data(data)
.hideAxis(["name"])
.composite("darker")
.render()
.shadows()
.reorderable()
.brushMode("1D-axes") // enable brushing
.on("brushend", function(){
console.log(pc1.selected());
console.log(pc2.selected());
});
pc2
.data(data)
.hideAxis(["name"])
.composite("darker")
.render()
.shadows()
.reorderable()
.brushMode("1D-axes") // enable brushing
.on("brushend", function(){
console.log(pc1.selected());
console.log(pc2.selected());
});
});
d3.select('#brushReset').on('click', function () {
pc1.brushReset();
pc2.brushReset();
});The two plots seem to be linked, in that console.log(pc1.selected()) and console.log(pc2.selected()) always return the same data even when brushes are different between plots. Could this be because of the way I'm loading the data?
Interestingly, you must also click the brushReset button twice in order for both plots to refresh.