如何在d3中用div包圍所有選定的SVG路徑元素？

Question

我已經預先創建了svg圖片。我的JavaScript選擇某些類的元素，並添加html工具提示，如果我將它們鼠標懸停。 我有一組其他元素通過類名鏈接到這些可靠的元素。 我想圍繞這些元素與邊界（不是一個接一個，但所有的人在一起），如果我mouseover。

你有什麼想法如何在D3中做到這一點？

我的JavaScript代碼如下所示（現在我能只是改變懸停筆觸顏色）：

var HTMLmouseTip = d3.select("div.mouse.tooltip"); 
var tooltip = d3.selectAll(".tooltip:not(.css)"); 
var g = d3.select("svg").select("g"); 

var clusters = g.selectAll(".showTooltip") 
      .on("mouseover", function(){ 
       tooltip.style("opacity", "1"); 
       heatmap.style("opacity", "1"); 
       tooltip.style("color", this.getAttribute("fill")); 
       var id = this.getAttribute("id"); 
       HTMLmouseTip 
        .html(this.getAttribute("tooltip")) 
        .style("padding", 5 + "px"); 
       g.selectAll("."+id) 
        .style("stroke", "red"); 

      }) 
      .on("mousemove", function() { 
       HTMLmouseTip 
        .style("left", Math.max(0, d3.event.pageX-120) + "px") 
        .style("top", (d3.event.pageY + 20) + "px"); 
      }) 
      .on("mouseout", function() { 
       return tooltip.style("opacity", "0"); 
      }); 

感謝，

L.

Answer 1

首先你有問題。這：

var tooltip = d3.selectAll(".tooltip:not(.css)"); 

返回一個數組，所以當你這樣做：當你選擇了數組不是數組中的元素

tooltip.style("opacity", "1"); 

什麼也沒有發生。因此，更改爲：

tooltip.each(function(d){ 
    d3.select(this).style("opacity", "1").style("color",'red')// 
    }) 

的.each(function(d){...穿過陣列和d3.select(this)選擇數組中的項目。

現在這顯示在您的鼠標懸停提示：https://jsfiddle.net/reko91/csLwqzrc/3/

我們讓所有的節點在一個<g>元素。

做一個容器：

var container = d3.select("svg").append("g").attr('id','nodeContainer') 

現在選擇所有節點：

var heatmap = document.getElementsByClassName('NODE_424'); 

選擇容器追加到：通過所有節點

var thisContainer = document.getElementById('nodeContainer'); 

去，並加入到容器：

for(var i=0;i<heatmap.length;i++){ 
thisContainer.appendChild(heatmap[i]) 
} 

現在你應該可以只添加邊框就大功告成:)

更新小提琴：https://jsfiddle.net/reko91/csLwqzrc/5/

對於邊界，因爲你不能風格<g>元素（他們已經習慣了組元素），您必須將rect附加到容器和樣式上。

所以你必須得到容器x和y來定位矩形大小的矩形和寬度和高度。 getBBox()是完成此操作的最佳方法。

var containerBBox = document.getElementById('nodeContainer').getBBox(); 

這將返回x，y，寬度，高度。

現在追加一個矩形與屬性和your're完成：

container.append('rect') 
    .attr('x', containerBBox.x) 
    .attr('y', containerBBox.y) 
    .attr('width', containerBBox.width) 
    .attr('height', containerBBox.height) 
    .style('fill', 'none') 
    .style('stroke', 'red') 
    .style('stroke-width', 3) 

更新小提琴：https://jsfiddle.net/reko91/csLwqzrc/6/

現在你只想要顯示在鼠標懸停在邊界？並在鼠標移除？

鼠標懸停：

container.style('stroke', 'red') 
    .style('stroke-width', 3) 

鼠標移開時：

container.style('stroke', 'none') 

最終小提琴：https://jsfiddle.net/reko91/csLwqzrc/11/