d3點擊圓圈不起作用

我有一個D3的集羣圖的簡單的修改版本，我試圖迴應鼠標點擊。它適用於節點之間的鏈接，但不適用於節點本身。它看起來像我對待線和節點（svg圈）一樣，但節點不工作...但當然D3本身正在產生這些線...d3點擊圓圈不起作用

我有一個非常簡單的演示它的JSFiddle在：http://jsfiddle.net/gaelicmichael1965/c2XWg/8/

發生了什麼事？我當然會感謝任何可以提供的幫助。

var nodes = tree.nodes(flareData), 
    links = tree.links(nodes); 

    // Create all of the link paths (using diagonal projection) 
    // Uses D3 functions to create SVG elements 
var link = vis.selectAll(".link") 
    .data(links) 
.enter().append("path") 
    .attr("class", "link") 
    .attr("d", diagonal) 
    .on("click", function(d, index) { 
      console.log("Selected line"); 
    }); 

    // Create all of the g-elements that contain node svg-elements 
var node = vis.selectAll(".node") 
    .data(nodes) 
    .enter() 
    .append("circle") 
    .attr("class", "node") 
    .attr("r", 4.5) 
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 
    // In actuality, will need to access property of d 
    .style("fill", function(d, index) { return fillColors[index%4] }) 
    .on("click", function(d, index) { 
     console.log("Selected node"); 
    });

來源

2014-07-21 user3780094

你的問題源於你的CSS。特別是，你被關閉pointer events爲節點，這意味着鼠標觸發事件（如"click"）不處理：

.node { 
    font-size: 12px; 
    pointer-events: none; /*Comment out or remove this line*/ 
}

註釋掉或刪除pointer-events:none;線在你的CSS允許節點是您的"click"事件的目標。

來源

2014-07-21 18:34:45 mdml

謝謝！我當然是從D3複製這個，並沒有注意到！ – user3780094

@ user3780094：很高興幫助！如果你覺得它解決了你的問題，請隨時[接受我的回答]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）。 – mdml

d3點擊圓圈不起作用

回答

相關問題