注意在代码中用/表示路径。。。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>
时间： 2024-11-09 20:39:02