在 D3 地图中向 SVG 元素添加边框和边框半径

adding a border and border radius to an svg element in D3 Maps

本文关键字：边框 添加 元素 SVG D3 地图      更新时间：2023-09-26
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>

我真的不知道 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;
      });
}

让我知道这是否对您有帮助。

相关文章：