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

浏览数：50 / 时间：2015年06月09日

注意在代码中用/表示路径。。。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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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