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

Question

我试图让线条在多个图表上的鼠标悬停时改变样式。 In this example available here ，我有两个图表，都有五个组 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()  

    })
}

工作代码here

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