d3.js在鼠标上方链接多折线图和条形图

我正在尝试使用d3.js将条形图上的交互与折线图中的相关数据联系起来。我现在可以工作了，所以将鼠标悬停在一条线上会突出显示相关的线，但我很难让反向工作（即，将鼠标悬停在一条线上以突出显示相关的线）

我在这方面相对较新，但我猜这与我如何尝试访问折线图中的基础数据以确定匹配有关

我已经搜索了stackoverflow的答案和其他地方，但无法找出我遗漏了什么。建议

这是条形图鼠标的代码片段，它不起作用

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

            });

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

---

希望下面的代码对您有用。 在

条形图的
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;
   }
 }
});

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

//下面的代码将显示突出显示的区域名称，请不要忘记在条形图的mouseout中将其删除

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

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

从鼠标器中删除以下代码

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

如果它不起作用，请向我索取更多。
谢谢@saikiran，它起作用了。我不确定我是否理解所有的原因（比如嵌套的
if
语句正在做什么），所以我想我也会尝试其他推荐链接中建议的一些解决方案。