使用 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 填充模式时图像模糊 的相关文章

  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • 如何在 Highcharts / Highstock 上显示 x 轴上的十字线选定值和 y 轴上选定的日期?

    我正在研究这个项目 其中包括在交互式图表上显示历史数据 我得出的结论是 Highcharts Highstock 是最好的选择 因为它提供了最多的定制选项 我想要实现的目标是 当我将鼠标悬停在一个点上时 分别在 x 轴和 y 轴上显示所选值
  • 如何在phonegap应用程序中使用存储在localStorage中的json feed?

    这就是我正在做的 向我的网络服务器发出请求 响应采用 json 格式 使用 jquery 模板在我的应用程序中呈现回调数据 非常简单 就像魅力一样 问题是 我想在本地存储一些数据 这样我的应用程序就不必每次都从服务器获取它 3g 很慢 每笔
  • 错误找不到“pages”目录。请在项目根目录下创建一个”

    以前我的项目设置是 public next src pages components assets next config js 这工作正常 但我将结构更改为以下 public src client next config js jscon
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 自 JRE 1.7.0_25 起,Batik 无法进行转换

    自从我更新到 JAVA 1 7 0 25 以来 蜡染在应用转换时会抛出异常 堆栈跟踪是 java awt image ImagingOpException Unable to transform src image at java awt
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • jQuery 在 Chrome 下发现错误元素

    我使用 jQuery 迭代 HTML 表 并动态填充每行的行号 通过在文本框中填充行号 function updateRowNums myTable find tr each function index this find input i
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • 使用 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