D3 v4 parallel path selection coordinates with brushes d3 v4

I am trying to implement a similar diagram -

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 version of her d3 v4 -

https://github.com/mlarosa2/parcoords

for this, therefore, after using this library with some of my settings, I reached this point here -

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

So, if you open the block, you will see that I can no longer paint brushes on the y axis. I believe this is due to some problems of the d3.dispatch event in this library.

These are the changes I had to make in mlarosa2/parcoordsorder to produce at least a running demonstration -

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()tod3.arc()

permanently 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 / useful tips for finding / debugging problems in the lower block, so that we can create and apply selections along the y axis, as in https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953 with d3 v4.

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

- Update -

, paracoords.js, , . , , .

-, , , .