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

;
})

这是通过使用id为classed行提供的。使用不同的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

如果您对此有任何疑问，请与我们联系。

链接小多个图表d3js的线

1 个答案: