javascript - d3 v4 parallel coordinates selection of paths with d3 v4 brushes

Question

I am trying to implement a chart similar to this -

https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953

in d3 v4. So I found this library here -

https://github.com/syntagmatic/parallel-coordinates

which was originally written in d3 v4 so I found a partial ported d3 v4 version her -

https://github.com/mlarosa2/parcoords

for this so after using this library with some of my customizations I have reached this point here -

http://blockbuilder.org/iamdeadman/9e7c89d21c7dc1ce1b13b1ceb931c9eb

So, if you open the block you can see that I am not able to draw the brushes on the y-axis anymore. I believe this is because of some d3.dispatch event issue in this library.

These are the changes that I had to make to make in mlarosa2/parcoords in order to produce atleast a running demo -

d3.svg.brush() ----to---> d3.brush();

brush.y(__.dimensions[axis].yscale)
.on("brushstart", function() {
if(d3.event.sourceEvent !== null) {
events.brushstart.call(pc, __.brushed);
d3.event.sourceEvent.stopPropagation();
}}).on("brush", function() {
brushUpdated(selected());}).on("brushend", function() {
events.brushend.call(pc, __.brushed);});

----to--->

brush.extent(__.dimensions[axis].yscale)
.on("start", function() {if(d3.event.sourceEvent !== null) {
// events.call('brushstart', pc, __.brushed);
events.brushstart.call(pc, __.brushed);
d3.event.sourceEvent.stopPropagation();
}})
.on("brush", function() {
brushUpdated(selected());
})
.on("end", function() {
// events.call('brushend', pc,__.brushed);
events.brushend.call(pc, __.brushed);
});

changed -

var brush = g.append("svg:g")
  .attr("class", "brush")
  .each(function(d) {
    d3.select(this).call(brushFor(d));
  });

----to--->

var brush = g.append("svg:g")
      .attr("class", "brush")
      .each(function(d) {
        try {d3.select(this).call(brushFor(d));} catch(e){}
      });

changed d3.svg.arc() to d3.arc()

lastly changed-

d3.selectAll([canvas.foreground, canvas.brushed]).classed("faded", true);
data.forEach(path_highlight);
events.highlight.call(this, data);
----to--->
d3.selectAll([canvas.foreground.clientWidth, canvas.brushed.clientWidth]).classed("faded", true);
data.forEach(path_highlight);
events.call('highlight', this, data);

Can anyone suggest any changes / helpful tips to find / debug the issues in the below block, so that we can create & apply selections to y-axis like in https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953 with d3 v4.

https://bl.ocks.org/iamdeadman/raw/9e7c89d21c7dc1ce1b13b1ceb931c9eb/78e688e476259ffd85de091a1c17804a1d87d7ba/

--Update--

So, after trying a couple of more changes in the paracoords.js we were able to create the brush handles, but on movement the brushes refresh all data instead of just selected points from brush. I believe there is some error with the brush setting up which is why the selected points are not being accessible on the brushed event call.

Can any one please have a look into this issue & help to see if this can be fixed.

Answer 1

This doesn't address your question directly but the latest version of Parcoords (ported to d3 v5) is https://github.com/BigFatDog/parcoords-es. I don't think you should have this issue using this version. As of November 2018, this repo is under active development.