使用d3.js在組中選定對象周圍繪製動態多邊形

Question

下面給出的是我的代碼示例，我嘗試過使用css筆劃&提綱，但兩者都不符合我的要求，即將'stroke'應用於'g'會爲其中的所有元素添加筆劃，但它將遍佈每個元素（圖像1）。我正在尋找圍繞元素的單一邊界。所以我嘗試使用css'outline'來創建一個矩形邊框的'g'標籤，而不是圍繞這些對象集合（圖2）。

圖像1（使用CSS '行程'）

圖像2（使用CSS '綱要' 到 'G'）

圖像3（這是我試圖實現的）

<g class="selected-group" data-id="24907"> 
    <polygon fill="#F9E794" points="3476.813,1307.591 3476.813,1308.81 3476.813,1357.5 3425.223,1357.5 3425.223,1308.81 3425.223,1307.591" class="selected" data-id="24907"></polygon> 
    <polygon fill="#F9E794" points="3425.223,1307.591 3425.223,1308.81 3425.223,1357.5 3425.223,1404.68 3376.153,1404.68 3376.153,1357.5 3376.153,1307.591" class="selected" data-id="974937"></polygon> 
</g> 

欣賞對此的任何支持。謝謝。

Answer 1

這是你在找什麼？這個例子不是一個通用的解決方案。您需要執行幾何的布爾聯合並將其渲染到其他多邊形之上。

// assumes clockwise point ordering 
 
var blocks = [ 
 
    ['10,10', '230,10', '230,490', '10,490'], 
 
    ['230,10', '490,10', '490,230', '230,230'] 
 
]; 
 

 
var selection = blocks[0]; 
 
selection.splice(
 
    selection.indexOf(blocks[1][0]), 1, blocks[1] 
 
); 
 

 
d3.select('svg') 
 
    .selectAll('.area-box') 
 
    .data(blocks) 
 
    .enter() 
 
    .append('polygon') 
 
    .attr('class', 'area-box') 
 
    .attr('points', function (d) { return d.join(' ') }); 
 

 
d3.select('svg') 
 
    .selectAll('.bounding-box') 
 
    .data([selection]) 
 
    .enter() 
 
    .append('polygon') 
 
    .attr('class', 'bounding-box') 
 
    .attr('points', function (d) { return d.join(' ') });

.area-box { 
 
    fill: yellow; 
 
    stroke: darkgray; 
 
    stroke-width: 5px; 
 
} 
 
.bounding-box { 
 
    fill: rgba(0,0,0,0); 
 
} 
 
.bounding-box:hover { 
 
    fill: rgba(0,0,0,0.1); 
 
    stroke: red; 
 
    stroke-width: 5px; 
 
    stroke-dasharray: 10; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script> 
 
<svg width='500' height='500' viewBox='0 0 1200 1200'></svg>