博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于添加图片到svg中,rails下使用js, 用parseFloat来调整force.on时的位置
阅读量:7165 次
发布时间:2019-06-29

本文共 1197 字,大约阅读时间需要 3 分钟。

注意在代码中用/表示路径。。。windows中file才是\

1、<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %> x="0" y="0" height="30px" width="30px"/>

    (1)在html中科院直接用嵌入式的方式获得rails中的图片。比如这里的图片放在\app\assets\images\vnet\virtual_switch.png,直接用rails的asset_path可以获得url

    (2)当然使用直接路径也可以<image xlink:href="\assets\vnet\virtual_switch.png" x="800" y="0" height="30px" width="30px"/>

 

2、var image_vswitch = "/assets/vnet/virtual_switch.png";

    在js中,不能使用嵌入式的方法,只有直接引用,注意这里的路径信息

 

3、用js在svg中添加图片,这里是先绑定g元素,然后再加,当然觉得如果没有其他的,只用image元素也是可以的

 

4、d3js中最后force.on的时候稍微调整图片的位置

node.attr("transform", function(d) { var dx = parseFloat(d.x) - 13;                                         var dy = parseFloat(d.y) - 12;                                         return "translate(" + dx + "," + dy + ")";									   });

  

 

总代码好好看吧。

<%= render partial: 'vnet_nav_bar' %>
x="0" y="0" height="30px" width="30px"/>
x="200" y="0" height="30px" width="30px"/>
x="400" y="0" height="30px" width="30px"/>
virtual switch
virtual machine
virtual machine container

  

转载地址:http://yvvwm.baihongyu.com/

你可能感兴趣的文章
云存储安全的最佳实践
查看>>
chrome浏览器调试Android手机的网页
查看>>
从执行上下文深入理解闭包
查看>>
根据数组中对象的某个属性值排序
查看>>
从实践认识修饰符
查看>>
python开发-多个装饰器的执行顺序
查看>>
React Native 中的状态栏(Android沉浸式)
查看>>
Java版-数据结构-栈
查看>>
Xcode9使用新体验
查看>>
3分钟快速了解海量数据分析产品-日志易
查看>>
JavaScript基础入门笔记
查看>>
前端零基础教学开始第五天 05 -day 三种布局技巧与浮动 C3样式 阴影
查看>>
你经常遇到的Android 日常开发问题总结
查看>>
现在国内IT行业是不是程序员过多了?
查看>>
Python爬虫--- 1.5 爬虫实践: 获取百度贴吧内容
查看>>
SpringMVC工作流程
查看>>
基础知识 第四节 常用的指令
查看>>
小白的Python 学习笔记(一)List 常用方法汇总
查看>>
(十二)java版b2b2c社交电商spring cloud分布式微服务:使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪...
查看>>
MySQL8.0 • 引擎特性 • 关于undo表空间的一些新变化
查看>>