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元素？

回答

相關問題