Javascript D3鼠标同时在两个图形上移动

如何一次捕获两个图形事件上的鼠标。我需要执行下图所示的操作：

---

有谁能告诉我该怎么做？。到目前为止，我能够让简单的鼠标在单个图形上工作。

这取决于您如何创建图表

如果使用嵌套的enter模式（绑定数据、输入SVG，然后从嵌套数据中输入每个图表），则与使用两个单独创建的图表时略有不同

但一般来说，要找一个可以效仿的例子

首先创建未展开的文本和圆形覆盖：

var focus = svg.append("g")
      .attr("class", "focus")
      .style("display", "none");

  focus.append("circle")
      .attr("r", 4.5);

  focus.append("text")
      .attr("x", 9)
      .attr("dy", ".35em");

在您的情况下，为每个图表创建它们

然后设置覆盖并捕获鼠标覆盖：

svg.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

  function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
    focus.select("text").text(formatCurrency(d.close));
  }

在您的例子中，由于图表具有相同的宽度，因此可以对每个图表使用来自x（d.date）比例返回的相同x变换

对于y值来说，事情有点棘手

如果使用不同的数据集，您可能会遇到类似的情况。如果要嵌套单个数据集，则需要以不同的方式使用键索引：

function mousemove() {
        var x0 = x.invert(d3.mouse(this)[0]),
            i = bisectDate(data, x0, 1),
            d0 = data[i - 1],
            d1 = data[i],
            d = x0 - d0.date > d1.date - x0 ? d1 : d0;

          var d02 = data2[i - 1],
            d12 = data2[i],
            d2 = x0 - d02.date > d12.date - x0 ? d12 : d0;
        focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
        focus.select("text").text(formatCurrency(d.close));
focuslowerchart.attr("transform", "translate(" + x(d.date) + "," +      (yLower(d2.close) + ")");
        focuslowerchart.select("text").text(formatCurrencyLower(d.close));
      }

以上假设图表之间采用相同的

i

索引。如果数据集的顺序不同，则需要进行不同的对分。

我是这本书的作者，能够将事件分派到多个图形中，例如，其中一个是

鼠标上方的


var宽度=300
变量高度=180
变量a=函数图({
目标:"a",，
高度:高度,，
宽度：宽度，
数据：[{fn:'x^2'}]
})
var b=函数图({
目标:"b",，
高度:高度,，
宽度：宽度，
数据：[{fn:'x'}]
})
a、 地址链接（b）
b、 addLink（a）

我现在在手机上，很难共享链接，但是搜索“可擦洗”的D3图表，这就是你想要的名称。顺便说一句，博斯托克在《纽约时报》上制作了一张漂亮的可擦洗图表，就像你在上面展示的那样。但是，即使你找到了教程，请不要删除这个问题，我真的很想看看建议的解决方案。有时有人会提出一种非常不同的方法。只是一个想法，如果我们有一个多行的图，这不是更好吗。由于x和y的域和范围都是相同的…您对此有何看法。