使用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>