2014-04-24 100 views
2

我正在開發D3中的一個力有向圖。現在,當我mouseover節點它將連接鏈接的不透明度從0更改爲1,然後當我mouseout它將不透明度返回到0.如何防止點擊D3後的鼠標移出?

這工作正常,但我遇到麻煩點擊該節點即使在出現鼠標事件之後仍將鏈接的不透明度保持爲1。然後,我希望能夠點擊其他節點以使其鏈接不透明度爲1。然後還能夠點擊一些先前點擊的節點,以便能夠將其關聯鏈接的不透明度返回到0.

總之,我希望能夠切換相關鏈接的不透明度節點不受鼠標事件的影響。下面是我當前代碼的一個示例。我想我可能不得不設置一個新的ID來打開和關閉,當我點擊一個節點?

var nodeClick = function(d) { 
    svg.selectAll(".link") 
    .filter(function(p) { 
      return _(d.facets).contains(p.target.name) 
    }) 
    .transition() 
    .style('stroke-opacity', 0.9); 
}; 

var overText1 = function(d) { 
    svg.selectAll(".link") 
    .filter(function(p) { 
      return _(d.facets).contains(p.target.name) 
    }) 
    .transition() 
    .style('stroke-opacity', 0.9); 
}; 

var overText0 = function(d) { 
     svg.selectAll(".link") 
     .transition() 
     .duration(500) 
     .style('stroke-opacity', 0); 
    }; 

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", function (d) { 
     return d.group === 1 ? "nodeBig" : "node"; 
    }) 
    .attr("r", function(d) {return d.radius }) 
    .style("fill", function (d) { 
     return color(d.group); 
    }) 
    .on("mouseover", overText1) 
    .on('click', nodeClick) 
    .on('mouseout', overText0) 
    .call(force.drag); 
+0

在您的點擊處理程序中,您可以爲受影響的鏈接設置特定屬性,然後在您的mouseout處理程序中檢查該屬性。 –

回答

0

我終於明白我自己的想法了。我創建了一個接受「true」或「false」的鎖定字段。然後,我在mouseoff函數中放置了一個if語句,該函數僅在鎖字段中沒有「true」的元素上啓用mouseoff功能。