Question

我在D3呈现的SVG图形中有美国州和县的地图。每个路径都有绑定到它的mouseover，mouseout和click事件，以及设置为路径ID的FIPS县代码。

我有一个jQuery Autocomplete输入，用户可以输入州或县的名称。给定输入，使相应的FIPS ID可用，如何以编程方式触发鼠标悬停事件？

Answer 1

我想出了答案。主要问题是D3没有jQuery那样的显式trigger函数。但是，您可以模拟它。

假设您有通过

构建的D3路径

d3.json("us-counties.json", function(json){

  thisObj._svg.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", thisObj._path)
    .attr("class", "states")
    .attr("id", function(d){
      return d.id; //<-- Sets the ID of this county to the path
    })
    .style("fill", "gray")
    .style("stroke", "black")
    .style("stroke-width", "0.5px")
    .on("dblclick", mapZoom)
    .on("mouseover", mapMouseOver)
    .on("mouseout", mapMouseOut);
});

和一个改变填充和描边颜色的鼠标悬停事件处理程序

var mapMouseOver(d){

  d3.selectAll($("#" + d.id))
    .style("fill", "red")
    .style("stroke", "blue");

}

通常，大多数教程都说使用

d3.select(this)...

但实际上使用该值也有效。如果您有一个事件处理程序，它可以获取节点的ID，并通过

触发它

$("#someDropdownSelect").change(someEventHandler)

function someEventHandler(){

  //get node ID value, sample
  var key = $(this)
              .children(":selected")
              .val();

  //trigger mouseover event handler
  mapMouseOver({id : key});

}

将根据下拉选择

执行鼠标悬停事件

Answer 2

您可以通过直接在所需元素上调度事件来实现此目的：

var event = document.createEvent('SVGEvents');
event.initEvent(eventName,true,true);
element.dispatchEvent(event);

在此blog post

中查看更多详情

Answer 3

构建你的javascript，使mouseover事件调用javascript函数，然后你可以随时调用相同的函数。

Answer 4

Steve Greatrex的解决方案适用于iOS 9，但不适用于iOS 10。

在调试我的代码和一些研究之后，问题似乎是根据documentation不推荐使用createEvent和initEvent函数。

新的写作方式是：

var event = new MouseEvent('SVGEvents', {});
element.dispatchEvent(event);

可以找到有关使用事件构造函数创建和触发事件的新方法的更多说明here。

d3 - 触发鼠标悬停事件

4 个答案: