d3 v4平行坐标用d3 v4画笔选择路径 [英] d3 v4 parallel coordinates selection of paths with d3 v4 brushes
问题描述
我正在尝试实施类似于此的图表 -
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
最初是用d3 v4编写的，所以我找到了部分移植的d3 v4版本她 -
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
因此，如果打开块，您可以看到我无法再在y轴上绘制画笔。
我相信这是因为这个库中有一些d3.dispatch事件问题。
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.
这些是我必须在 mlarosa2 / parcoords 中进行的更改，以便生成至少一个正在运行的演示 -
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（） ----到---> d3.brush（）;
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);
任何人都可以建议任何更改/有用的提示来查找/调试以下块中的问题，
这样我们就可以创造&将选择应用于y轴，如 https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953使用d3 v4。
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.
- 更新 -
因此，在尝试了paracoords.js中的几个更改后，我们能够创建画笔手柄，但在移动时，画笔会刷新所有数据，而不是刷新选定的点。
我相信刷子设置有一些错误，这就是刷拉事件调用无法访问所选点的原因。
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.
推荐答案
这不能直接解决您的问题，但最新版本的Parcoords（移植到d3 v5）是 https://github.com/BigFatDog/parcoords-es 。我认为你不应该使用这个版本。截至2018年11月，这个回购正在积极发展。
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.
这篇关于d3 v4平行坐标用d3 v4画笔选择路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
