关于添加图片到svg中，rails下使用js，用parseFloat来调整force.on时的位置

注意在代码中用/表示路径。。。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' %><meta charset="utf-8">
<style>
/*
.node {stroke: #fff;stroke-width: 1.5px;
}.link {stroke: #999;stroke-opacity: .6;
}
*/
</style>
<body><svg width="2000" height="30"><image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %> x="0" y="0" height="30px" width="30px"/><image xlink:href=<%= asset_path 'vnet/virtual_machine.png' %> x="200" y="0" height="30px" width="30px"/><image xlink:href=<%= asset_path 'vnet/virtual_machine_container.png' %> x="400" y="0" height="30px" width="30px"/><text x="33" y="18" fill="black">virtual switch</text><text x="233" y="18" fill="black">virtual machine</text><text x="433" y="18" fill="black">virtual machine container</text></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
/*<circle cx="12" cy="10" r="10"  fill="#FF3420"/><circle cx="12" cy="35" r="10"  fill="#7FFF00"/><circle cx="12" cy="60" r="10"  fill="#1E90FF"/><!--rect x="2" y="50" width="20" height="20" style="fill:#1E90FF" /--><image xlink:href="http://photo.kaibei.com/Upfiles/BeyondPic/zixun/shumajishu/2009-01/20090110011644496.gif" x="30"    y="80" height="50px" width="50px"/>
*/
var image_vswitch = "/assets/vnet/virtual_switch.png";
var image_vm = "/assets/vnet/virtual_machine.png";
var image_vmc = "/assets/vnet/virtual_machine_container.png";
var width = 960,height = 500;//var color = d3.scale.category20();var force = d3.layout.force().charge(-1000).linkDistance(30).size([width, height]).gravity(0.25);var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);d3.json("http://localhost:3000/vnets/topodata.json", function(error, graph) { //放入apach后这个地址是否要改？force.nodes(graph.nodes).links(graph.links).start();var link = svg.selectAll(".link").data(graph.links).enter().append("line").style("stroke","#C6E2FF").style("stroke-opacity","10").style("stroke-width","3").attr("class", "link");//.style("stroke-width", function(d) { return Math.sqrt(d.value); });var node = svg.selectAll(".node").data(graph.nodes);var nodeEnter = node.enter().append("g").attr("class", "node").call(force.drag);nodeEnter.append("title").text(function(d) { return d.name; });/*nodeEnter.append("circle").attr("r", 8).style("fill", function(d) { if(d.group == 1)return "#FF3420";else if(d.group == 2)return "#7FFF00";else if(d.group == 3)return "#1E90FF";});*/nodeEnter.append("image").attr("width","28px").attr("height","28px").attr("xlink:href", function(d) { if(d.group == 1)return image_vswitch;else if(d.group == 2)return image_vm;else if(d.group == 3)return image_vmc;});
nodeEnter.append("text").attr("dy", ".85em").text(function(d) { return d.name; }).attr("font-size","13px") //字体大小.style("fill","#0A0A0A");force.on("tick", function() {link.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; });//node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";});node.attr("transform", function(d) { var dx = parseFloat(d.x) - 13;var dy = parseFloat(d.y) - 12;return "translate(" + dx + "," + dy + ")";});});
});</script>

转载于:https://www.cnblogs.com/juandx/p/3959860.html

关于添加图片到svg中，rails下使用js，用parseFloat来调整force.on时的位置相关推荐

android文本自动添加图片格式,Android中多行文本末尾添加图片排版问题的解决方法...
前言最近在项目中需要在某个多行英文文本末尾增加一个图片,尝试了很多方法,最后用了一个比较Tricky的方法解决了,当然这种方法不一定是最好最优的解决办法,记录一下. 问题如果直接使用drawabl ...
java web工程中如何添加图片_java web中如何添加图片
java web中如何添加图片对于java可视化界面插入背景图片只需要background-image:url(图片路径)就行,而对于web项目中,并非如此效果如下: 我们就需要在jsp页面中写J ...
android textview 添加图片大小,Android_Android中使用TextView实现图文混排的方法，向TextView或EditText中添加图像比 - phpStudy...
Android中使用TextView实现图文混排的方法向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到标签. 只有一个src属性,该属性原则上应该指向一个图像地址或可 ...
图片转svg标注_使用psd.js将PSD转成SVG -- 基础篇（文字图片）
转载至微信公众号:方凳雅集背景随着发展,活动会场页面的题图运营需要线上模板化,而自研的导购素材制作平台接入了海棠-创意中心,通过平台能力,将素材模板化,并且通过配置化的方式生成多种场景化,个性化的 ...
html动态添加图片不显示不出来,解决 viewer.js 动态更新图片导致无法预览的问题...
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
php中如何插入图片,php如何添加图片
php如何添加图片?php中插入图片的代码是什么? PHP插入图片,实际还是输出HTML代码比如:echo ''; 还可以直接用PHP生成图片显示出来 php的gd库可以生成多种图像文件,如gif, ...
iOS(Swift3)中添加通讯录、添加图片到图库、添加视频到图库
1. 添加通讯录联系人 /**添加联系人*/ + (void)addContact:(CNContact *)contact {// 创建联系人请求CNSaveRequest *saveRequest ...
android添加图片按钮,如何给Android中的按钮添加图片功能
在layout中建一个my_login.xml文件代码如下 android:layout_width="fill_parent" android:layout_height=&q ...
android 固定比例图片裁剪插件,移动端添加图片裁剪的坑
本文关键:阻止冒泡.canvas压缩.canvas裁剪.生成黑色图片. 最近项目需要在添加图片时实现裁剪功能,虽然 github 上开源的裁剪插件不少,试了好几个插件,在移动端体验好的寥寥无几.躺了几 ...

关于添加图片到svg中，rails下使用js，用parseFloat来调整force.on时的位置

关于添加图片到svg中，rails下使用js，用parseFloat来调整force.on时的位置相关推荐

最新文章

热门文章

关于添加图片到svg中，rails下使用js， 用parseFloat来调整force.on时的位置

关于添加图片到svg中，rails下使用js， 用parseFloat来调整force.on时的位置相关推荐

最新文章

热门文章

关于添加图片到svg中，rails下使用js，用parseFloat来调整force.on时的位置

关于添加图片到svg中，rails下使用js，用parseFloat来调整force.on时的位置相关推荐