跨多个小型图表d3js的链接线

Question

我试图让线更改多个图表上的鼠标悬停时的样式。 在这里的示例中 ，我有两个图表，它们都具有五个组A，B，C，D，E。 但是每个都位于不同的csv中（我愿意将数据放入一个csv或作为一个json数组，但这就是我现在设置的方式）。

我可以得到两个图表，每个图表有五条线对应于该组。 使用以下代码，我将鼠标悬停在线条上以更改样式，同时淡出该图表中的其他线条。

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

;
})

这是通过使用classed为行赋予id来实现的。 使用不同的ID，类似地选择其他图表中的线。

我要实现的一种方法是，如果在一个图表中突出显示了例如组A的线，在另一个图表中也突出了该线（并且所有其他未选择的线在所有图表中都淡化了）。 我认为也许可以通过获取选定线的索引并以某种方式在其他图表中使用该索引来完成。

Answer 1

我们可以在一个地方处理两条线的mouseover和mouseout来解决。

主要是为了避免代码重复（DRY原理）

我们将鼠标悬停和鼠标悬停在一个可以处理两个svg事件的地方。

因此，而不是像这样单独附加侦听器

d3.selectAll('path.line.mainline')
    .on("mouseover", function(d) {

和

d3.selectAll('path.line.mainlinel')
    .on("mouseover", function(d) { 

像这样做：

  d3.selectAll('path.line')//register this to all paths
    .on("mouseover", function(d,i) {

利用过滤器获取将其悬停的行。

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

完整的方法将如下所示：

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

    })
}

这里的工作代码

如果对此有任何疑问，请告诉我。