d3 - 触发mouseover事件 [英] d3 - trigger mouseover event

问题描述

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

我有一个jQuery自动完成输入，用户可以输入州或县的名称。给定输入，这使得相应的FIPS ID可用，我如何编程鼠标触发事件？

解决方案

回答。主要的问题是D3没有一个显式的触发器函数作为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; //<  - 将此县的ID设置为路径
}）
 .style ，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（）{
 
 //获取节点ID值，示例
 var key = $（this）
。 children（：selected）
 .val（）; 
 
 //触发mouseover事件处理程序
 mapMouseOver（{id：key}）; 
 
} 
  

将根据下拉选择执行鼠标悬停事件

I have a map of the US states and counties in a SVG graphic rendered by D3. Each path have mouseover, mouseout and click events bound to it, as well as the FIPS county code set as the path ID.

I have a jQuery Autocomplete input where the user can input the name of a state or county. Given that input, which makes the corresponding FIPS ID available, how can I trigger the mouseover event programatically?

解决方案

I figured out the answer. The main problem is D3 does not have an explicit trigger function as jQuery does. However, you can simulate it.

Say you have a D3 path built via

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

and a mouseover event handler that changes the fill and stroke colors

var mapMouseOver(d){

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

}

Typically, most tutorials say to use

d3.select(this)...

but actually using the value works as well. If you have an event handler that gets you the ID of the node, and trigger it via

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

function someEventHandler(){

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

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

}

will execute the mouseover event based on a dropdown selection

这篇关于d3 - 触发mouseover事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！