关于添加图片到svg中，rails下使用js， 用parseFloat来调整force.on时的位置
生活随笔
收集整理的這篇文章主要介紹了
关于添加图片到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时的位置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手把手教你做关键词匹配项目（搜索引擎）-
- 下一篇： GROUP与HAVING的使用