用图像替换 d3.js 符号

2024-02-03

参考这个fiddle example http://jsfiddle.net/andycooper/a7as6/:

我需要用图像替换符号...或者可能首先用单个图像替换...例如,此图像:

https://github.com/favicon.ico

我在代码中尝试的内容如下:

vis.selectAll("path")
     .data(nodes)
   .enter().append("path")
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
     .append("image")
   .attr("xlink:href", "https://github.com/favicon.ico")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
       .attr("height", 16)
       .style("stroke", "black")
       .style("stroke-width", "1px")
       .call(force.drag);

正在追加中image标记到每个path标签,但不显示图像本身。有什么提示吗?


您将每个图像附加为每个路径的子级。您可能想要的是附加一个包含路径和图像的组(我认为这就是您在第一条评论中所要求的)。

像这样的东西:

var groups = vis.selectAll("g")
    .data(nodes).enter()
    .append("g")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(force.drag);

groups.append("path")
    .attr("d", d3.svg.symbol()
        .size(function(d) { return d.size; })
        .type(function(d) { return d.type; }))
    .style("fill", "steelblue")
    .style("stroke", "black")
    .style("stroke-width", "1.5px");

groups.append("image")
   .attr("xlink:href", "https://github.com/favicon.ico")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
       .attr("height", 16)
       .style("stroke", "black")
       .style("stroke-width", "1px");

See: http://jsfiddle.net/findango/a7as6/4/ http://jsfiddle.net/findango/a7as6/4/

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

用图像替换 d3.js 符号 的相关文章

随机推荐

  • 如何使用 atoi() 获得负值?

    我编写这段代码是为了获取相反形式的数字 但如果我使用任何负输入 它会显示正反转数 C 中的 atoi 函数可以处理负数吗 include
  • 在 C++/CX 中解析 JSON ISO8601 日期

    我有一个来自 JSON 2012 08 01T15 42 06Z 的日期字符串 并且想要在 Windows 运行时中解析它 据我所知 只有COle日期时间可以处理这个问题 当我取出 T 和 Z 字符时 我只能让它正确解析字符串 但这增加了一
  • Pycharm - 在远程解释器中配置 PYTHONPATH

    我在 Windows 上安装了 PyCharm 2 7 3 并且正在尝试在 Linux 计算机上远程开发应用程序 到目前为止 我可以运行简单的程序 但是我正在尝试设置我的 PYTHONPATH 并且 PyCharm 似乎特别忽略了此配置 在
  • 获取 Windows Phone 上 ScrollViewer 的滚动事件

    问题 获取 Windows Phone 上 ScrollViewer 的滚动事件 我有一个像这样的滚动查看器
  • 可以将 crossorigin 属性添加到 Angular cli 生成的脚本标签中吗?

    是否可以将 crossorigin 属性添加到 Angular cli 生成的脚本标签中 运行我的角度应用程序时 脚本标签被添加到我的index html的末尾 是否可以配置 angular cli 以便当这些标签包含在构建 index h
  • 仅从类和接口静态导入

    我的代码在 Eclipse 中编译得很好 但是当我尝试从命令行编译 通过我们基于 ruby 的构建系统 时 我收到以下错误消息 static import only from classes and interfaces 建议不允许静态导入
  • 如何从 WAMP 恢复 MySQL 数据库?

    上个月我不得不重新安装 Windows 并且我已经将WAMP http en wikipedia org wiki WAMP文件夹到另一个分区 现在我再次安装了 WAMP 但我需要旧数据库 如何从安全分区上保存的 WAMP 文件夹中获取旧的
  • 系统托盘应用程序如何在其他平台上完成?

    Windows 有一个 系统托盘 其中包含时钟和始终运行的服务 例如 MSN Steam 等 我想开发一个 wxPython 托盘应用程序 但我想知道它移植到其他平台的效果如何 每个平台上的托盘等效项是什么 以及支持 Windows OSX
  • CGAffineTransformMakeScale 动画不起作用

    我有一个视图控制器 其中有一个视图 在删除它之前 我使用 UIView 动画将其缩小到 0 我的驳回它的代码是 UIView animateWithDuration dismissAnimationDuration delay 0 0 op
  • 如何将 GameLift 与 Unity3d 集成作为游戏客户端

    我正在尝试使用 Unity3d 游戏作为 GameList 客户端 根据GameLift 论坛 https gamedev amazon com forums questions 13771 create client in unity h
  • 如何在绘图中使用多个组,但仅使用定义数量的图例组

    假设我有多个不同细胞的时间序列 我可以根据它们是否接受治疗来分割它们 我如何绘制所有单独的时间序列 不平均 但根据绘图中的治疗对它们进行分组 它与 ggplot 完美配合 我知道我可以从那里使用 ggplotly 但有完整的情节方式吗 以下
  • python 组合范围和数字列表

    range 5 15 1 1 5 6 10 10 10 11 17 28 range 6 24 4 10 10 10 15 16 18 20 24 30 range 7 41 9 18 19 23 23 26 28 40 42 44 ran
  • 获取OpenCV当前的FPS

    我正在编写一个 OpenCV 应用程序 FPS 非常重要 如何计算主循环的处理时间以获得当前和平均 FPS 这样 我就可以知道我的应用程序运行速度有多快 顺便说一句 我在 SSD 上使用 imread 所以处理器是这 里的瓶颈 你可以做这样
  • 单击锚标记时,将 HTML 文本输入的 readonly 属性设置为 false

    My HTML div class profileForm fieldset fieldset div
  • 网关未出现在 jhipster 注册表中

    我已经为网关应用程序创建了一个 docker 映像 但是当我运行命令时 docker compose up只有微服务和注册表是UP的 但网关甚至没有出现在实例中 22 08 25 10 57 23 661 ERROR 1 restarted
  • 强制完全重绘 Jpanel Java2D

    我的问题是 我需要制作一个不断更新的 GUI 因为我从数据库获取可以更改的值 并且在图形区域中遇到了一些问题 我使用 Graphics2D 中的 Drawline 和 Drawstring 打印在数据库中找到的值 这些字符串和线条移动并更改
  • Google脚本DriveApp.getFolders().hasNext()错误

    我想在驱动器中创建一个目录 如果该目录尚不存在 function CreateDirectory var folderName Example var Directory var fi DriveApp getFoldersByName f
  • WEKA 生成的模型似乎无法预测给定属性索引的类别和分布

    Overview 我正在使用 WEKA API 3 7 10 开发者版本 来使用我预制的 model files 我制作了 25 个模型 五种算法的五个结果变量 J48决策树 http weka sourceforge net doc de
  • Magento:(大多数)国家/地区在结账时扣除税费 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我在一家英国时装店工作 客户有一个特
  • 用图像替换 d3.js 符号

    参考这个fiddle example http jsfiddle net andycooper a7as6 我需要用图像替换符号 或者可能首先用单个图像替换 例如 此图像 https github com favicon ico 我在代码中