D3.js将多线图表与鼠标图上的条形图链接在一起

Question

我正在尝试使用d3.js中的线图中的相关数据将交互作用链接到链接图。我现在正在工作，所以悬停在一条线上可以突出显示关联的栏，但是很难使相反的工作（即悬停在栏上以突出相关线）。

我对此是相对较新的，但是我猜这与我试图访问线路图中的基础数据以识别匹配的方式有关。

我已经通过Stackoverflow答案和其他地方进行了搜索，但无法弄清楚我缺少什么。建议？

bl.ocks.org上的代码

这是bar图表鼠标的代码段

        barchart.selectAll("rect")
                    .on("mouseover", function(d) {
                    activeState = d.state;
                    linechart.selectAll("line")
                    .classed("pathLight", function(d) {
                        if ( d.state  == activeState) return true;
                        else return false;
                        });
                    console.log(activeState);
                })
                .on("mouseout", function() {
                    d3.selectAll("path")
                    .attr("class", "pathBase");
            });

编辑：找到了另一个答案，这对我的问题很有帮助：从SVG

Answer 1

希望以下代码对您有用。在barChart的mouseover中保留以下代码

linechart.selectAll("g")
.each(function(d) {
  if(d){
    if ( d.state == activeState){
      console.log(d3.select(this).select("path"));
      d3.select(this).select("path").classed("pathLight", true);
      return true;
    }
    else{
     return false;
   }
 }
});

//以下代码是显示突出显示的区域名称，不要忘记在barChart的mouseout中删除此

var xPosition = xLabel + 8;
var yPosition = h/2; 
linechart.append("text")
.attr("id", "hoverLabel")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "start")
.attr("font-family", "ff-nuvo-sc-web-pro-1,ff-nuvo-sc-web-pro-2, sans-serif")
.attr("font-size", "14px")
.text( activeState); 

从该Mouseouver删除以下代码

linechart.selectAll("line")
.classed("pathLight", function(d) {
  if ( d.state == activeState) return true;
  else return false;
}); 

如果它不起作用，请问我更多。