跨多個小型圖表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()  

    })
}

這里的工作代碼

如果對此有任何疑問，請告訴我。