首页 > 代码库 > 关于添加图片到svg中，rails下使用js， 用parseFloat来调整force.on时的位置
关于添加图片到svg中，rails下使用js， 用parseFloat来调整force.on时的位置
注意在代码中用/表示路径。。。windows中file才是\
1、<image xlink:href=http://www.mamicode.com/ 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="http://www.mamicode.com/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=http://www.mamicode.com/ x="0" y="0" height="30px" width="30px"/> <image xlink:href=http://www.mamicode.com/ x="200" y="0" height="30px" width="30px"/> <image xlink:href=http://www.mamicode.com/ 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>
关于添加图片到svg中，rails下使用js， 用parseFloat来调整force.on时的位置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。