D3事件 - 如何让按钮点击d3元素？

我有一个美国所有县的SVG渲染。每个路径上绑定了四个事件：D3事件 - 如何让按钮点击d3元素？

click : opens up tooltip graphic with three buttons 
dblclick : executes zoom effect 
mouseover : shows tooltip with county/state data, changes fill 
mouseout : returns fill to original

我的问题是，我想一个click事件区分为其打开了按钮提示的地图，那里面提示的按钮。

我通过

thisObj._tooltip = d3.select("body") 
    .append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0);

创建工具提示和地图创建通过

d3.json("/static/js/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; 
    }) 
    .style("fill", "gray") 
    .style("stroke", "black") 
    .style("stroke-width", "0.5px") 
    .on("click", mapClick) 
    .on("dblclick", mapZoom) 
    .on("mouseover", mapMouseOver) 
    .on("mouseout", mapMouseOut); 
});

我mapClick处理器是

var mapClick = function(d, i){ 

    if (thisObj._tooltipOpen){ 

     if ($(".button").is(":checked")){ 

      console.log($(this).attr("id") + " was clicked"); 

     } else { 

      console.log("Close tooltip click recorded"); 
      thisObj._tooltip.transition() 
       .duration(500) 
       .style("opacity", 0); 

      thisObj._tooltipOpen = false; 

      mapMouseOut(d); 
     } 

    } else { 
     console.log("Open tooltip click recorded"); 

     //tooltip template in html, want to handle a button click on these buttons 
     var template = "<div id = 'tooltip_template'>" + 
      "<div class = 'county_data'>" + d.name + ", " + d.properties.StateCode + "</div>" + 
      "<button id = 'add_prospective_market' class = 'button'>Prospective Market</button>" + 
      "<button id = 'add_market' class = 'button'>Market County</button>" + 
      "<button id = 'remove_market' class = 'button'>Remove Market</button></div>"; 

     thisObj._tooltip.html(template) 
      .style("left", (d3.event.pageX) + "px") 
      .style("top", (d3.event.pageY + "px")); 

     $(".button").button(); 

     thisObj._tooltip.transition() 
      .duration(1000) 
      .style("opacity", .8); 

     thisObj._tooltipOpen = true; 
    } 
}

我必须通过

实例化一个按钮处理程序

$("#add_market").on("click", function(){ 
    console.log("Add Market button clicked"); 
}

但它从来没有激活，我得到的唯一日志记录是工具提示打开/关闭通知。鉴于此代码，我如何修改点击处理程序来区分按钮点击和非按钮点击？

来源

2013-09-25 Jason

你是否忽视了工具提示'div'中的指针事件？ –

@LarsKotthoff，它是你和reblace建议的结合。我更改了指针事件设置，并将按钮事件绑定到每个单击事件上的工具提示。 – Jason

我猜之前的ID存在，所以处理程序没有得到注册到任何你正在做的

$("#add_market").on("click", function(){ 
    console.log("Add Market button clicked"); 
}

程序登记。既然这是一个jQuery选择，如果它是空的，你将不会得到一个错误，如果带有id“add_market”的元素不存在，会发生什么。

尝试把一个logging语句的代码，注册处理程序块前/后：

console.log("About to register the listener"); 
$("#add_market").on("click", function(){ 
    console.log("Add Market button clicked"); 
} 
console.log("Done registering the listener");

，看看它的前/“打开提示点击记录”后，日志信息。或者，你可以把一个断点在这条线：

$("#add_market").on("click", function(){

，看看“$（”＃add_market“）” jQuery选择器发现有什么。

要修复它，您可以在模板本身中注册侦听器，或者您可以在创建工具提示和按钮后粘住侦听器注册码。

来源

2013-09-25 15:45:21 reblace

您对事件注册没有约束力有一个很好的观点。我noew在工具提示的实例上绑定按钮事件侦听器。 – Jason

如果父元素具有值为“无”的css属性“pointer-events”，那么它将阻止子元素的鼠标和触摸事件，并为此解决方案添加相同的属性（“pointer-events” ）值为“auto”的子元素，则子元素将触发事件。

来源

2013-10-26 10:13:36

D3事件 - 如何让按钮点击d3元素？

回答

相关问题