Question

我尝试使用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");

            });

修改找到另一个答案，它对我这样的问题有帮助： clicking a node in d3 from a button outside the svg

Answer 1

希望下面的代码对您有用。将mouseover 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 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;
});

如果它不工作，请问我，以获取更多信息。

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

1 个答案: