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

【问题标题】：d3 v4 parallel coordinates selection of paths with d3 v4 brushesd3 v4 使用 d3 v4 画笔选择路径的平行坐标
【发布时间】：2018-03-16 21:12:34
【问题描述】：

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

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 中尝试了更多更改后，我们能够创建画笔手柄，但在移动时画笔会刷新所有数据，而不仅仅是从画笔中选择点。我相信刷子设置存在一些错误，这就是为什么在刷子事件调用中无法访问所选点的原因。

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

【问题讨论】：

不久前，我制作了 Mike Bostock 的简单 d3 v3 平行坐标示例的 d3 v4 version。这并没有直接解决您的问题，但它是一个稍微小一点的例子来消化。

标签： javascript d3.js svg brush parallel-coordinates

【解决方案1】：

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

【讨论】：