d3.js的关系图初试（附加拖拽、缩放及根据自定义名称确定节点）

最新推荐文章于 2022-12-06 11:53:19 发布

置顶

慵懒的绿箭

最新推荐文章于 2022-12-06 11:53:19 发布

阅读量9.1k

点赞数 6

文章标签： D3.js 关系图

本文链接：https://blog.csdn.net/qq_27971625/article/details/76690593

版权

上次用的百度的echarts做的关系图，这周选择的是d3.js做的关系图。总体来看，echarts更简单一些，因为他的文档很容易，而d3的因为是外国的，所以文档阅读起来比较麻烦，即使有中文文档但是有些东西仍然要看英文的。但是因为echarts封装的很好，所以说要用起来就只能很规范化的做那一套了，而有些东西要进行自己设计就不行了，而d3就解决了这一点。就比如说连线上的箭头，echarts只能在连线的左右，而d3是自己绘制的所以可以决定大小和位置。另d3主要是用svg而echarts用的canvas。不过现在d3的v4版本也加入了canvas。

我就直接把代码复制下来了，里面具体的需要查看的资料以及实现都已经注释了，方便自己查看。

注：仅为我练习所用，虽然应该没人看。只是给自己记录一下

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<meta charset="utf-8"/>
	<title></title>
	
</head>
<body>
	

<style>





.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

#licensing {
  fill: green;
}

.link.licensing {
  stroke: green;
}

.link.resolved {
  stroke-dasharray: 0,2 1;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 10px Microsoft YaHei;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

.linetext {
    font-size: 12px Microsoft YaHei;
}

.tooltip{
position: absolute;
width: 120;
height: auto;
font-family: simsun;
font-size: 14px;
text-align: center;
border-style: solid; 
border-width: 1px;
background-color: white;
border-radius: 5px;
}

</style>
	
<script src="jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>	
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--
	作者：绿箭
	时间：2017-08-04
	描述：d3.js需在Firefox、Internet Explorer9、谷歌Chrome和Safari中使用。因为是直接在html中添加svg代码
-->
<script>
var chaxuntext=$(".chaxuntext").text;


// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
var links = [
  {source: "同花顺", target: "IFIND", type: "resolved", rela:"主营产品",jieshao:"专门做股票的，哈哈1"},
  {source: "同花顺", target: "手机金融信息服务", type: "resolved", rela:"主营产品",jieshao:"专门做股票的，哈哈2"},
  {source: "同花顺", target: "互联网金融信息服务", type: "resolved", rela:"主营产品",jieshao:"专门做股票的，哈哈3"},
  {source: "同花顺", target: "网上行情交易系统", type: "resolved", rela:"主营产品",jieshao:"专门做股票的，哈哈4"},
  {source: "同花顺", target: "金融资讯及数据服务", type: "resolved", rela:"主营产品",jieshao:"专门做股票的，哈哈5"},
  {source: "同花顺", target: "互联网金融", type: "resolved",rela:"主营产品",jieshao:"专门做股票的，哈哈6"},
  {source: "同花顺", target: "金融服务", type: "resolved",rela:"主营产品",jieshao:"专门做股票的，哈哈7"},
  {source: "手机金融信息服务", target: "金融信息服务", type: "resolved", rela:

最低0.47元/天解锁文章

慵懒的绿箭

关注

6
点赞
踩
23

收藏

觉得还不错? 一键收藏
12
评论
d3.js的关系图初试（附加拖拽、缩放及根据自定义名称确定节点）

上次用的百度的echarts做的关系图，这周选择的是d3.js做的关系图。总体来看，echarts更简单一些，因为他的文档很容易，而d3的因为是外国的，所以文档阅读起来比较麻烦，即使有中文文档但是有些东西仍然要看英文的。但是因为echarts封装的很好，所以说要用起来就只能很规范化的做那一套了，而有些东西要进行自己设计就不行了，而d3就解决了这一点。就比如说连线上的箭头，echarts只能在连线的...
复制链接

扫一扫