d3.js在鼠标悬停时将多折线图与条形图链接

问题描述

我试图使用d3.js将条形图上的交互与线形图中的相关数据链接。我现在正在工作，所以悬停在一条线突出相关的酒吧，但我有麻烦反向工作（即悬停在一个酒吧，以突出相关的行）。

I'm trying to link interactions on a bar chart with related data in a line chart using d3.js. I have it working now so hovering over a line highlights the associated bar, but am having trouble getting the reverse to work (i.e. hovering over a bar to highlight the related line).

我在这个相对较新，但我猜想它与我如何尝试访问在线图中的基础数据以确定匹配。

I am relatively new at this, but I'm guessing it has something to do with how I'm trying to access the underlying data in the line chart to identify a match.

我搜索过stackoverflow的答案和其他地方，但无法弄清楚我失踪了。建议？

I've searched through stackoverflow answers and elsewhere but can't figure out what I am missing. Suggestions?

bl.ocks.org上的

推荐答案

希望下面的代码将为您工作。
保持

Hope below code will work for you.Keep below code in mouseover of barChart

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

//下面的代码是显示突出显示的地区名称，不要忘记删除 mouseout of barChart

//Below Code is to show the highlighted region name, and don't forget to remove this in mouseout of barChart

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

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

If it's not working ask me, for more.

这篇关于d3.js在鼠标悬停时将多折线图与条形图链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！