注意在代码中用/表示路径。。。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时的位置的更多相关文章

  1. 动态插入图片到 svg 中

    动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...

  2. 同一页面中引入多个JS库产生的冲突解决方案(转)

    发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号.因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...

  3. 在 SVG 中添加交互性

    原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgint/ SVG 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. ...

  4. 在RichTextBox控件中添加图片和文字

    public void SetText(RichTextBox rtb) { rtb.Text = "在RichTextBox控件中添加图片和文字" + Environment.N ...

  5. 关于在Silverlight中添加图片的问题

    在Silverlight中添加图片,目前支持的Image格式有jpg和png两种,如何在目录中添加,有些什么技巧呢? <StackPanel Background="White&quo ...

  6. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  7. 删除字符串中的"\U0000fffc"数据 textView添加图片 以及添加后属性失效的解决

    背景:在实现textView的富文本时,如果添加一张图片后,如果直接发送textView的内容时,图片会被字符串“\U0000fffc”替换. 问题:如何删除“\U0000fffc”字符串:如何替换t ...

  8. Java 添加、提取PDF中的图片

    Spire.Cloud.SDK for Java提供了PdfImagesApi接口可用于添加图片到PDF文档addImage().提取PDF中的图片extractImages(),具体操作步骤和Jav ...

  9. C# 利用占位符替换word中的字符串和添加图片

    利用占位符替换word中的字符串和添加图片   ///<summary>         /// 替换word模板文件内容,包括表格中内容         /// 调用如下:WordStr ...

随机推荐

  1. android 手机红外遥控器实现

    经过连续几天的编制,安卓手机代码终于完成了,目前已经将我宿舍,家里,集控室的红外遥控电气设备完好的遥控了,另外还遥控了我的D7000相机,不错终于完工了.代码分为二类:各种电视.相机.等等遥控编码最简 ...

  2. RabbitMQ 安装和监控[原,转]

    在Windows上安装Rabbit MQ 指南,最好的是这篇<Rabbit MQ Windows Installation guide>,其中还包括了使用.NET RabbitMQ.Cli ...

  3. jquery插件--ajaxfileupload.js上传文件原理分析

    英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, u ...

  4. python学习笔记——多进程中的锁Lock

    1 进程锁 python编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性. 每个对象都对应于一个可称为“互斥锁”的标记,这个标记用来保证在任一时刻,只能有一线程访问对象. 在python中我 ...

  5. 转 生成 HTMLTestRunner 测试报告

    转自:http://www.cnblogs.com/hero-blog/p/4128575.html 04.生成 HTMLTestRunner  测试报告   1.HTMLTestRunner 是 P ...

  6. [转]玩转UltraEdit,UE常见快捷键操作

    编辑器Ultraedit快捷键说到编辑器的快捷键,VIM是无与伦比的.要反对,也得是带脚踏板的EmaCS.UE还是有差距的,很大差距.注意:VIM是开源.免费的,而UE则需要注册.UE是Windows ...

  7. add printer driver error 1802修复说明

    1.重启电脑后 ,将服务"Print Spooler"服务重新启动2.srclient.dll文件拷贝到c盘 windows/system32目录下3.连接好打印机USB接口,重装 ...

  8. 江南白衣 Java性能优化PPT

    会后江南白衣花费数日整理PPT,到1.4版本共66页,内容翔实且旁征博引,不断校正且力求做到极致的匠艺精神值得尊敬! 技术大牛飒然Hang如是说到: “技术大神中,除了陈皓就是白衣了,四十岁还能钻研. ...

  9. GNU的strong symbol和weak symbol

    首先,同样的原型的两个函数在连个不同的c文件中都有定义,把这两个c文件编译.连接在一起,也没有什么错误.原因就是因为,gcc中有一个strong symbol和weak symbol的概念.默认函数定 ...

  10. verilog中的default应该赋什么样的值

    Q:在状态机的case语句中,最后要加上默认项default,可是我看到有的书上写的是一个确定的状态,有的则是不定态xxx,到底应该写那个啊?求助! A1:取决于case条件是否完备啦如果你的case ...