[英]How to access elements from dataset in d3
I have a parallel coordinates plot and I want to show lines onclick
for d.dataset = train
else hide them.我有一个平行坐标图,我想显示
d.dataset = train
onclick
线,否则隐藏它们。
I wanted to access the row using .filter()
like this:我想使用
.filter()
访问该行,如下所示:
data.filter(function(d) { return d.dataset == "train"; }).attr("visibility", "hidden");
and then set the attr visibility to hidden so that afterwards I can write a function with onclick
to make the visibility visible, something like this:然后将 attr 可见性设置为 hidden 以便之后我可以使用
onclick
编写一个函数来使可见性可见,如下所示:
// On Click, we want to add data to the array and chart
svg.on("click", function() {
var line = d3.mouse(this);
if (d.dataset === "train"){
//Display line of d.dataset === train
// line.attr("visibility", "visible");
}
});
This one I found also d3.selectAll("[dataset=train]").attr("visibility", "hidden");
这个我也发现了
d3.selectAll("[dataset=train]").attr("visibility", "hidden");
but this doesn't work when doing with data elements right?但这在处理数据元素时不起作用吗?
Right now I tried these and nothing happens.现在我尝试了这些,但没有任何反应。 This is the jsfiddle I am working in. The line with
"dataset":"train",
is visible and doesn't hide.这是我正在使用的jsfiddle 。带有
"dataset":"train",
是可见的,不会隐藏。
How can I hide the lines when "dataset":"train",
and then show them when onclick
to the other lines in the parallel coordinates plot?我怎样可以隐藏线路时,
"dataset":"train",
然后告诉他们时onclick
在平行坐标图中的其他行?
Any help would be highly appreciated.任何帮助将不胜感激。
First, make some marks on each path, for example, give a class name like coorPath
so that it will be easier to find them.首先,在每个路径上做一些标记,例如,给一个类似
coorPath
这样的类名,这样会更容易找到它们。 I added it for both background
and foreground
since I didn't know their difference.我为
background
和foreground
都添加了它,因为我不知道它们的区别。
svg.append("g")
.attr("class", "background coorPath") // add classname
.selectAll("path")
.data(dataSet)
.enter().append("path")
.attr("d", draw);
// CHANGE: duplicate with below code
/* svg.append("g")
.attr("class", "foreground coorPath")
.selectAll("path")
.data(dataSet)
.enter().append("path")
.attr("d", draw); */
// USE THE COLOR SCALE TO SET THE STROKE BASED ON THE DATA
foreground = svg.append("g")
.attr("class", "foreground coorPath")
.selectAll("path")
.data(dataSet)
.enter().append("path")
.attr("d", draw)
.style("stroke", function(d) {
var company = d.type.slice(0, d.type.indexOf(' '));
return color(company);
})
Then, find out the line of train, and make it invisible at first然后,找出火车的路线,先让它不可见
let trainline = d3.selectAll("path").filter(function(d) { return d.dataset == "train"; })
trainline.attr("visibility", "hidden");
Show the line of train when one of other lines is clicked.单击其他线路之一时显示火车线路。
svg.selectAll(".coorPath").on("click", function(d) {
// show train when click others
trainline.attr("visibility", "visible")
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.