d3 v4使用d3 v4画笔的路径的平行坐标选择

Question

我正在尝试实现与此类似的图表-

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

在d3 v4中。 所以我在这里找到这个图书馆-

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

它最初是用d3 v4编写的，所以我发现她的部分移植的d3 v4版本-

https://github.com/mlarosa2/parcoords

为此，在将此库与一些自定义项结合使用之后，我在这里达到了这一点-

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

因此，如果打开块，您将看到我不再能够在y轴上绘制画笔。 我相信这是由于该库中的某些d3.dispatch事件问题。

这些是我必须在mlarosa2/parcoords中进行的更改，以便产生至少一个正在运行的演示-

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);
});

已更改-

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){}
      });

将d3.svg.arc()更改为d3.arc()

最后更改-

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);

任何人都可以在下面的块中提出任何更改/有用的技巧来查找/调试问题，以便我们可以像在https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953中使用d3 v4一样将选择内容创建并应用到y轴。

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

-更新-

因此，在paracoords.js中尝试了几次其他更改后，我们能够创建画笔手柄，但是在移动时，画笔会刷新所有数据，而不仅仅是画笔中的选定点。 我相信画笔设置存在一些错误，这就是为什么在画笔事件调用中无法访问所选点的原因。

任何人都可以看看这个问题和帮助，看看是否可以解决。

Answer 1

这不会直接解决您的问题，但是Parcoords的最新版本（移植到d3 v5）是https://github.com/BigFatDog/parcoords-es 。 我认为使用此版本不应该出现此问题。 截至2018年11月，此仓库正在积极开发中。