D3.js实现加密货币浮动气泡图圆形填充异常问题咨询

需调整的属性与修改方案 #

你遇到的部分圆形填充异常问题主要由ID冲突、滤镜区域裁剪、数据大小写错误三类原因导致，按以下步骤修改即可：

• 修正defs挂载位置
  原代码将defs挂载到每个.node分组下，会导致滤镜、pattern的ID重复，部分浏览器无法正确识别填充资源。将var defs = node.append("defs");改为挂载到SVG根节点：

  var defs = svgContainer.append("defs");
  

• 调整SVG滤镜参数避免裁剪
  原滤镜仅设置了130%的高度，未设置偏移，高斯模糊的溢出区域会被裁剪，导致气泡看起来填充不完整。修改滤镜配置：

  var filter = defs.append("filter")
    .attr("id", id)
    .attr("x", "-30%") // 向左偏移30%容纳模糊区域
    .attr("y", "-30%") // 向上偏移30%容纳模糊区域
    .attr("width", "160%")
    .attr("height", "160%");
  
  // 原stdDeviation=20过大，小气泡的模糊会盖过填充，调整为10适配示例效果
  filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 10)
    .attr("result", "blur");
  

• 优化pattern填充配置
  原preserveAspectRatio设为none会导致非正方形的币种logo拉伸变形，出现空白边缘，修改为等比缩放填满圆形：

  defs.selectAll(null)
    .data(data)
    .enter()
    .append("pattern")
    .attr("id", d => d.image)
    .attr("height", "100%")
    .attr("width", "100%")
    .attr("patternContentUnits", "objectBoundingBox")
    .append("image")
    .attr("height", 1)
    .attr("width", 1)
    .attr("preserveAspectRatio", "xMidYMid slice") // 等比缩放填满圆形，超出部分裁剪
    .attr("xlink:href", d => d.image);
  

• 修正数据字段大小写错误
  原代码中market_cap.usd一会大写一会小写，会导致部分气泡半径计算错误，看起来像填充不全：

  data.push({
    text: text,
    category: coin.market_data.price_change_percentage_24h + "%",
    image: coin.image.large,
    color: coin.color,
    r: r,
    r_change_1: coin.market_data.market_cap.usd / 3500000000, // 大写USD改为小写usd
    r_change_2: coin.market_data.market_cap.usd / 3500000000, // 大写USD改为小写usd
  });
  

内容的提问来源于stack exchange，提问作者Tom van den Bogaart