[英]Link lines across small multiple charts d3js
I am trying to get lines to change style on mouseover across multiple charts. 我试图让线更改多个图表上的鼠标悬停时的样式。 In this example available here , I have two charts that both have five groups A,B,C,D,E.
在这里的示例中 ,我有两个图表,它们都具有五个组A,B,C,D,E。 Each however is in a different csv (I am open to bringing the data in one csv or as one json array, but this is just how I have it set up right now).
但是每个都位于不同的csv中(我愿意将数据放入一个csv或作为一个json数组,但这就是我现在设置的方式)。
I can get two charts each with five lines corresponding to the group. 我可以得到两个图表,每个图表有五条线对应于该组。 Using the below code, I get the hovered over line to change style whilst fading out the other lines in that chart.
使用以下代码,我将鼠标悬停在线条上以更改样式,同时淡出该图表中的其他线条。
// Fading and Selecting Lines
d3.selectAll('path.line.mainline')
.on("mouseover", function(d) {
var HoveredLine = this;
d3.selectAll('path.line.mainline').transition().duration(0)
.style('opacity',function () {
return (this === HoveredLine) ? 1.0 : 0.1;
})
.style('stroke-width',function () {
return (this === HoveredLine) ? 4 : 2;
})
;
})
This is achieved by giving the lines an id
using classed
. 这是通过使用
classed
为行赋予id
来实现的。 Using a different id, the lines in the other chart are selected similarly. 使用不同的ID,类似地选择其他图表中的线。
What I want to achieve is a way that if the line of eg group A is highlighted in one chart, it is also highlighted in the other chart also (and all other non-selected lines are faded in all charts). 我要实现的一种方法是,如果在一个图表中突出显示了例如组A的线,在另一个图表中也突出了该线(并且所有其他未选择的线在所有图表中都淡化了)。 I thought maybe this could be done by getting the index of the selected line and somehow using that in the other chart.
我认为也许可以通过获取选定线的索引并以某种方式在其他图表中使用该索引来完成。
We can solve it by having a single place where we handle mouseover
and mouseout
for both lines. 我们可以在一个地方处理两条线的
mouseover
和mouseout
来解决。
Primarily to avoid code repeat (DRY principle) 主要是为了避免代码重复(DRY原理)
We will write mouse over and mouse out in a single place from where we can handle events in both svg. 我们将鼠标悬停和鼠标悬停在一个可以处理两个svg事件的地方。
So instead of attaching listeners individually like this 因此,而不是像这样单独附加侦听器
d3.selectAll('path.line.mainline')
.on("mouseover", function(d) {
and 和
d3.selectAll('path.line.mainlinel')
.on("mouseover", function(d) {
Do it like this: 像这样做:
d3.selectAll('path.line')//register this to all paths
.on("mouseover", function(d,i) {
Make use of filter to get the lines on which it is hovered. 利用过滤器获取将其悬停的行。
d3.selectAll('path.line').filter(function(d1) {
return d.name == d1.name; all which have same name get it via filter
})
.style("opacity", 1)//show filtered links
.style("stroke-width", 4);
Full method will be like this: 完整的方法将如下所示:
function doHover() {
d3.selectAll('path.line')//register this to all paths
.on("mouseover", function(d,i) {
//first make all lines vanish
d3.selectAll('path.line')
.style("opacity", 0.1)
.style("stroke-width", 2)
//only show lines which have same name.
d3.selectAll('path.line').filter(function(d1) {
return d.name == d1.name
})
.style("opacity", 1)
.style("stroke-width", 4);
d3.select("div#chartw.container svg")
.append("text")
.attr("id", "cohorttext")
.html("Cohort " + d.name)
.attr("x", (width) / 1.2)
.attr("y", margin.top * 1.5)
.style("fill", color(d.name))
.style("font-weight", "bold")
.style("font-size", "18px");
d3.select("div#chartw.container svg")
.append("text")
.attr("id", "cohorttextx")
.html("Gini = " + giniw[i%giniw.length])//so that its always within the max length
.attr("x", (width) / 1.2)
.attr("y", 20 + margin.top * 1.5)
.style("fill", color(d.name))
.style("font-size", "14px");
d3.select("div#chartl.container svg")
.append("text")
.attr("id", "cohorttext")
.text("Cohort " + d.name)
.attr("x", (width) / 1.2)
.attr("y", margin.top * 1.5)
.style("fill", color(d.name))
.style("font-weight", "bold")
.style("font-size", "18px");
d3.select("div#chartl.container svg")
.append("text")
.attr("id", "cohorttextx")
.html("Gini = " + ginil[i%ginil.length])//so that its always within the max length
.attr("x", (width) / 1.2)
.attr("y", 20 + margin.top * 1.5)
.style("fill", color(d.name))
.style("font-size", "14px");
})
.on("mouseout", function() {
d3.selectAll('path.line')
.style("opacity", 1)
.style("stroke-width", 2);
//selectALL because we are giving same id to both text in 2 svgs
d3.selectAll("#cohorttext").remove()
d3.selectAll("#cohorttextx").remove()
})
}
Please let me know if you have any queries on this. 如果对此有任何疑问,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.