使用 svg 圆的 url 填充模式时图像模糊

2023-12-01

我正在尝试使用d3.js 圆形包装示例使用 SVG 的图案填充用图像填充一堆 svg 圆圈。我的源图像是 800x600,但圆圈的大小会有所不同。我设置如下:

  var patterns = defs.selectAll("pattern")
      .data(nodes.filter(function(d){ return !d.children }))
      .enter()
      .append('pattern')
      .attr('id',function(d){
        return 'id'+d.id
      })
      .attr('x','0')
      .attr('y','0')
      .attr('height',function(d){ return d.r*2})
      .attr('width',function(d){ return d.r*2*1.333333})
      .append('image')
      .attr('x','0')
      .attr('y','0')
      .attr('height',function(d){ return d.r*2})
      .attr('width',function(d){ return d.r*2*1.333333})
      .attr('xlink:href',function(d){
        return 'img/img' + d.image;
      })

  var circle = svg.selectAll("circle")
      .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
      .style("fill", function(d) {
        if (!d.children){
          return 'url(#id' + d.id + ')';
        } else {
          return d.children ? color(d.depth) : null;
        }

      })

这样我的 DOM 就会像这样渲染:

<defs id="cdef">
    <pattern id="id65" x="0" y="0" height="326.8534904318234" width="435.8045449579344">
        <image x="0" y="0" height="326.8534904318234" width="435.8045449579344" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/img65.png"></image>
    </pattern>
    ...
</defs>

But when I do this, the images in the circle are super blown-out (see attached image). Any idea what's going on?enter image description here


我明白了这一点。

图案元素的高度和宽度似乎有点像比例/百分比。因此,宽度“1”意味着它将填充其设置的整个元素。宽度“.25”表示该元素的 25%。然后,在<pattern>您可以将图像的高度和宽度指定为它们所填充的圆的高度和宽度的实际像素值,因此在这种情况下,我的代码更改为:

  var patterns = defs.selectAll("pattern")
      .data(nodes.filter(function(d){ return !d.children }))
      .enter()
      .append('pattern')
      .attr('id',function(d){
        return 'id'+d.id
      })
      .attr('x','0')
      .attr('y','0')
      .attr('height','1')
      .attr('width','1')
      .append('image')
      .attr('height',function(d){ return d.r*2})
      .attr('width',function(d){ return d.r*2*1.333333})
      .attr('xlink:href',function(d){
        return 'img/img' + d.image;
      })

然后,因为圆形包布局放大,我必须确保也更改图像的定义,所以:

function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    defs.selectAll('image').attr('width',function(d){
      return d.r*2*1.333333*k
    }).attr('height',function(d){
      return d.r*2*k
    });
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });


  }

如果您要修改上面提到的 bl.ocks.org 示例,则需要。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 svg 圆的 url 填充模式时图像模糊 的相关文章

随机推荐

  • 使用 API 21 更改片段时出现图形错误

    我的 Nexus 5 出现图形问题 当我更改片段时 在新片段出现之前 有一个大正方形 其中包含新片段的一部分 过渡并不顺利 我使用 getSupportFragmentManager 作为片段 使用模拟器 API 21 和其他设备 API
  • 使用 jQuery 将 tr 附加到 thead 结果空白表行

    我正在尝试创建thead with tr 来自 JSON 对象数组 这是必需的 因为 jQuery 数据表需要它 我有以下脚本来做到这一点 但创建tr与空白值 function var json Number 10031 Descripti
  • Mercurial (hg) 更新错误,中止:没有这样的文件或目录

    我无法在我的机器上更新 Mercurial 存储库 当我进行更新时出现以下错误hg up traceback Traceback most recent call last File usr lib python2 7 dist packa
  • 在 CodeIgniter 中重定向 index.php

    我创建了一个 CodeIgniter 应用程序 现在我尝试将带有 index php 的 url 重定向到不带它的 url 我当前的 htaccess 是 RewriteEngine On RewriteBase Removes trail
  • 为什么除非使用临时变量,否则我不能推入 dyn Trait 的 Vec ?

    这是我的代码 use std rc Rc Weak use std cell RefCell trait Trait fn push
  • 尽管已设置标头,但仍不允许 CORS 请求

    我在尝试执行 XHR 请求时收到以下错误 我已经设置了 CORS 响应标头 但显然出现了问题 任何人都可以发现错误吗 XMLHttpRequest 无法加载http domain dev 路径 起源http mobile devAccess
  • 谷歌地图:事件监听器仅记住变量的最终值

    我正在整理一张 Google 地图 其中包含我国各地各个考试中心的位置 它在每个县上绘制一个标记 当您单击县标记时 它会放大并提供该县考试中心的概述 我也在使用 jQuery 来实现这个 问题是这样的 当我绘制县标记并单击它们时 它总是缩放
  • 正则表达式反向引用来匹配不同的值

    我有一个正则表达式 用于匹配以下形式的表达式 val1 operator val2 这个正则表达式看起来像 s a zA Z 0 9 0 9 s ni in gt gt lt lt s a zA Z 0 9 0 9 s 正如你所看到的 这实
  • 如何使用 javascript 更改 JQuery Mobile 按钮图标

    我想要一个根据用户选择更改数据图标类别的按钮 示例按钮为 a href language2 span English span a 我想知道我需要实现什么 JavaScript 代码才能更改自定义定义data icon english fl
  • Castle.Windsor:来自类型化工厂的组件的可选解析

    我有一个带有 Castle Windsor 的 WCF 服务设置 消息到达调度程序 调度程序将它们发送到正确的组件 基本上是一个IHandler
  • Chrome 的 Javascript 控制台:它以对象形式输出什么?

    从 Chrome 中的 javascript 控制台 gt function Person name this name name undefined 此时 根据 Javascript 规范 Person prototype 应该是一个空对
  • 如何并行迭代两个数组? [复制]

    这个问题在这里已经有答案了 我看起来能够并行迭代两个数组 或仅使用一个 for 循环 这是我尝试过的脚本 usr bin env python list1 one two three list2 I II III IV V for word
  • SpriteKit - 创建计时器

    如何创建一个每两秒触发一次的计时器 以便在屏幕上的 HUD 上将分数加一 这是我的 HUD 代码 implementation MyScene int counter BOOL updateLabel SKLabelNode counter
  • 如何在 R 中的直方图上叠加频率多边形?

    以下是我在 R 中使用的代码 使用 RGui 64 位 R 版本 3 3 1 用于绘制数据直方图以及频率多边形 我没有使用ggplot2 如何将频率多边形叠加在直方图之上 这样我就不必制作两个单独的图表 也就是说 我想要绘制直方图 并将频率
  • Firefox 中的 NS_ERROR_INVALID_POINTER 错误是什么?

    在 Firefox 3 5 中测试 JavaScript 代码时 有时会出现以下错误 Component returned failure code 0x80004003 NS ERROR INVALID POINTER 我尝试过谷歌搜索
  • 在自定义策略中获取 Azure AD B2C 应用程序客户端 ID

    您好 使用 B2C 应用程序的客户端 ID 调用自定义策略 我如何在策略中访问它 我认为这将被硬编码到 client id 声明中 但我不认为它是 它仅作为 aud 声明的默认值返回 但我再次在自定义策略中没有看到这一点 Thanks 好吧
  • 选择不同计数 cloudant/couchdb

    我正在使用 Cloudant 启动一个项目 这是一个简单的日志记录系统 因此我可以跟踪应用程序的使用情况 我的文档如下所示 app 应用程序名称 类型 页面视图 登录 ETC 所有者 用户的电子邮件 设备 iphone 安卓 ETC 日期
  • 通过 PHP 导出为 CSV

    假设我有一个数据库 有没有一种方法可以通过 PHP 将数据库中的内容导出到 CSV 文件 和文本文件 如果可能 我个人使用此函数从任何数组创建 CSV 内容 function array2csv array array if count a
  • javascript:如何在弹出窗口内编写

    我创建了一个 javascript 程序 创建了电影对象 创建了名为 myWin 的新窗口 并在 myWin 内创建了另一个名为 actorWin 的窗口 现在 当我单击 单击此处访问演员窗口 时 我想在 actorWin 中传递 url
  • 使用 svg 圆的 url 填充模式时图像模糊

    我正在尝试使用d3 js 圆形包装示例使用 SVG 的图案填充用图像填充一堆 svg 圆圈 我的源图像是 800x600 但圆圈的大小会有所不同 我设置如下 var patterns defs selectAll pattern data