在D3地图

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;
      });

}

如果有帮助，请告诉我。