Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use of selected() function #14

Closed
joshhjacobson opened this issue Jun 13, 2018 · 7 comments
Closed

Use of selected() function #14

joshhjacobson opened this issue Jun 13, 2018 · 7 comments

Comments

@joshhjacobson
Copy link
Contributor

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!

@BigFatDog
Copy link
Owner

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.

@joshhjacobson
Copy link
Contributor Author

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!

@BigFatDog
Copy link
Owner

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

@BigFatDog BigFatDog reopened this Jun 14, 2018
@joshhjacobson
Copy link
Contributor Author

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?

@joshhjacobson
Copy link
Contributor Author

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.

@BigFatDog
Copy link
Owner

2.1.1 has been released with the selected api.
However, there are still bugs unsolved in this conversion. The remaining bugs will be fixed in further releases.

@BigFatDog
Copy link
Owner

The two more bugs that you've found are tracked in:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants