d3.js在鼠标悬停时将多折线图与条形图链接 [英] d3.js Linking multi-line chart with bar chart on mouseover

问题描述

我试图使用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上的程式码

The code on bl.ocks.org

这是条形图鼠标悬停的代码段不起作用。

And here's the code snippet for the bar chart mouseover that's not working.

        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外部的按钮点击d3中的节点

推荐答案

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

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在鼠标悬停时将多折线图与条形图链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！