注意在代码中用/表示路径。。。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 SDK目录结构介绍

    Android SDK目录下有很多文件夹,主要都是干什么的呢? 1. add-ons 这里面保存着附加库,比如Google Maps,当然你如果安装了Ophone SDK,这里也会有一些类库在里面. ...

  2. Redis客户端

    1.自带的: Redis-cli 2.redis-desktop-manager-0.7.9.809  是一个图形化客户端 但是不支持集群  **由于linux防火墙默认开启,redis的服务端口63 ...

  3. vscode自定义背景颜色

    vscode自定义背景颜色   大概做前端的builder(只会打代码的才是coder,嘻嘻~)一半以上都会使用vscode编辑代码吧,vscode很轻量,支持的文件拖拽加入编辑区功能我个人认为很方便 ...

  4. linux内存回收机制

    无论计算机上有多少内存都是不够的,因而linux kernel需要回收一些很少使用的内存页面来保证系统持续有内存使用.页面回收的方式有页回写.页交换和页丢弃三种方式:如果一个很少使用的页的后备存储器是 ...

  5. unity5 创建material

    在material文件夹下 unity5中新创建的material默认如下 开始我不知道贴图应该加在哪儿.于是跳过教程上这一步,直接去选shader: 在这个shader下很明显看到加贴图的地方了: ...

  6. Fragment里面的ListView的item点击没反应

    近期做一个消息列表,发现fragment的listview载入消息出来后,每条消息都点击不了.经过询问和查下已解决 开发中非经常见的一个问题,项目中的listview不不过简单的文字,经常须要自定义l ...

  7. Linux系统中 Sublime Text 中文 GBK 文件乱码问题

    Sublime Text 是一个很不错编辑器,具有漂亮的界面和强大的功能.再加上丰富的插件,而且还跨平台,绝对是一款实打实的神器啊! 众所周知,Sublime Text 对中文支持的极差,可以说几乎就 ...

  8. Cocos2d-x添加Android手机震动

    这个震动需要调用adnroid系统的方法,所以需要C++调用java,JNI这里就不多做介绍了,需要的可以自己去查找下相关资料,如果你只是需要实现这个功能,相信你看完本文,应该就OK了! 1.首先,修 ...

  9. FZU Problem 2105 Digits Count

    Problem Description Given N integers A={A[0],A[1],...,A[N-1]}. Here we have some operations: Operati ...

  10. GetLastError()返回值大全

    [0]-操作成功完成.[1]-功能错误.[2]-系统找不到指定的文件.[3]-系统找不到指定的路径.[4]-系统无法打开文件.[5]-拒绝访问.[6]-句柄无效.[7]-存储控制块被损坏.[8]-存储 ...