14

我有一张由 D3 渲染的 SVG 图形中的美国州和县地图。每条路径都绑定了 mouseover、mouseout 和 click 事件，以及设置为路径 ID 的 FIPS 县代码。

我有一个 jQuery 自动完成输入，用户可以在其中输入州或县的名称。鉴于该输入使相应的 FIPS ID 可用，我如何以编程方式触发 mouseover 事件？

4

4 回答 4

7

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

假设您有一个通过以下方式构建的 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);
});

以及改变填充和描边颜色的 mouseover 事件处理程序

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

}

将根据下拉选择执行 mouseover 事件

于 2013-09-24T21:12:18.553 回答
6

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

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

在此博客文章中查看更多详细信息

于 2015-06-12T12:54:48.590 回答
3

构造您的 javascript，以便 mouseover 事件调用 javascript 函数，然后您可以随时调用相同的函数。

于 2013-09-24T21:02:55.773 回答
2

Steve Greatrex 的解决方案在 iOS 9 之前对我有效，但在 iOS 10 上无效。

在调试了我的代码并进行了一些研究之后，问题似乎是 createEvent 和 initEvent 函数根据本文档已被弃用。

新的写法是：

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

有关使用事件构造函数创建和触发事件的新方法的更多说明，请参见此处。

于 2016-10-19T19:48:18.377 回答