向D3中的svg元素添加邊框和邊框半徑地圖

Question

function buildMap(target, data, path, type) { 
    var svg = d3.select(target); 
    svg 
     .selectAll('path') 
     .data(data).enter() 
     .append('g').attr('class', function(d) { 
     var name = sanitize(d.properties.name); 
     // if(name != 'territories'){ 
      return name + '-group'; 
     // } 
     }) 
     .append('path') 
     .attr('d', path) 
     .attr("style", function() { 
     if(this.parentNode.parentNode.className.animVal == 'territories-group' && type == 'full'){ 
      //console.log(this.parentNode.parentNode.className.animVal == 'territories-group'); 
      return "outline: thick solid #FFFFFF;"; 
      } 
     }) 
     .attr('class', function(d) { 
     if (d.properties.hasOwnProperty('selected') && d.properties.selected) { 
      return 'highlighted'; 
     } 
     }) 
     .attr('transform', function(d) { 
     if (type == 'none') { 
      return ''; 
     } 
     var transform = getTransform(d, type); 
     return transform; 
     }); 
    } 

我正在構建美國和美國領土的地圖。我需要在每個美國領土周圍創建一個圓形邊界，但是我沒有運氣。它可以在路徑或<g>標記周圍。現在，我只是概述了路徑並且是矩形。我也嘗試將輪廓更改爲圓形，但我還沒有找到正確的方法。我嘗試追加一個新的矩形，圓等，但x和y座標都是一樣的。我找不到一種方法使它們成爲動態的或相對於子元素。

當前地圖

<svg> 
    <a> 
    <g> 
     <path> 

Answer 1

的樹我真的不知道D3，但設置路徑的筆觸和筆劃寬度屬性應該邊框添加到它。那麼，你有

.attr("style", function() { 
    if(this.parentNode.parentNode.className.animVal == 'territories-group' && type == 'full'){ 
    return "outline: thick solid #FFFFFF;"; 
    } 
}) 

塊，嘗試這樣的事情：

.attr('stroke','#FFFFFF') 
.attr('stroke-width', 3) 
.attr('fill','none') 

所以整個功能是這樣的：

function buildMap(target, data, path, type) { 

    var svg = d3.select(target); 

    svg 
     .selectAll('path') 
     .data(data).enter() 
     .append('g').attr('class', function(d) { 
     var name = sanitize(d.properties.name); 
     // if(name != 'territories'){ 
      return name + '-group'; 
     // } 
     }) 
     .append('path') 
     .attr('d', path) 
     .attr('stroke','#FFFFFF') 
     .attr('stroke-width', 3) 
     .attr('fill','none') 
     .attr('class', function(d) { 
     if (d.properties.hasOwnProperty('selected') && d.properties.selected) { 
      return 'highlighted'; 
     } 
     }) 
     .attr('transform', function(d) { 
     if (type == 'none') { 
      return ''; 
     } 
     var transform = getTransform(d, type); 
     return transform; 
     }); 

} 

讓我知道這是否可以幫助你。