d3 经典版本

最新推荐文章于 2023-07-24 10:43:28 发布
最新推荐文章于 2023-07-24 10:43:28 发布
阅读量1k 收藏
点赞数
分类专栏： d3框架学习
<!DOCTYPE html>
<meta charset="utf-8">
<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: 12px 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;
}


</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>


// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
var links = [
  {source: "同花顺", target: "IFIND", type: "resolved", rela:"主营产品"},
  {source: "同花顺", target: "手机金融信息服务", type: "resolved", rela:"主营产品"},
  {source: "同花顺", target: "互联网金融信息服务", type: "resolved", rela:"主营产品"},
  {source: "同花顺", target: "网上行情交易系统", type: "resolved", rela:"主营产品"},
  {source: "同花顺", target: "金融资讯及数据服务", type: "resolved", rela:"主营产品"},
  {source: "同花顺", target: "互联网金融", type: "resolved",rela:"主营产品"},
  {source: "同花顺", target: "金融服务", type: "resolved",rela:"主营产品"},
  {source: "手机金融信息服务", target: "金融信息服务", type: "resolved", rela:"上位产品"},
  {source: "互联网金融信息服务", target: "金融信息服务", type: "resolved", rela:"上位产品"},
  {source: "二三四五002195", target: "金融信息服务", type: "resolved", rela:"主营产品"},
  {source: "大智慧601519", target: "金融信息服务", type: "resolved", rela:"主营产品"},
  {source: "大智慧601519", target: "互联网金融信息服务", type: "resolved", rela:"主营产品"},
  {source: "金融服务", target: "移动互联网", type: "resolved", rela:"上游"},
  {source: "金融服务", target: "互联网金融服务", type: "resolved", rela:"下位产品"},
  {source: "金融服务", target: "综合金融服务", type: "resolved", rela:"下位产品"}
];


var nodes = {};


links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});


var width = 1560,
    height = 800;


var force = d3.layout.force()//layout将json格式转化为力学图可用的格式
    .nodes(d3.values(nodes))//设定节点数组
    .links(links)//设定连线数组
    .size([width, height])//作用域的大小
    .linkDistance(180)//连接线长度
    .charge(-1500)//顶点的电荷数。该参数决定是排斥还是吸引，数值越小越互相排斥
    .on("tick", tick)//指时间间隔，隔一段时间刷新一次画面
    .start();//开始转换


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


//箭头
var marker=
    svg.append("marker")
    //.attr("id", function(d) { return d; })
    .attr("id", "resolved")
    //.attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
    .attr("markerUnits","userSpaceOnUse")
    .attr("viewBox", "0 -5 10 10")//坐标系的区域
    .attr("refX",32)//箭头坐标
    .attr("refY", -1)
    .attr("markerWidth", 12)//标识的大小
    .attr("markerHeight", 12)
    .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
    .attr("stroke-width",2)//箭头宽度
    .append("path")
    .attr("d", "M0,-5L10,0L0,5")//箭头的路径
    .attr('fill','#000000');//箭头颜色


/* 将连接线设置为曲线
var path = svg.append("g").selectAll("path")
    .data(force.links())
    .enter().append("path")
    .attr("class", function(d) { return "link " + d.type; })
    .style("stroke",function(d){
        //console.log(d);
       return "#A254A2";//连接线的颜色
    })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
*/


//设置连接线    
var edges_line = svg.selectAll(".edgepath")
    .data(force.links())
    .enter()
    .append("path")
    .attr({
          'd': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
          'class':'edgepath',
          //'fill-opacity':0,
          //'stroke-opacity':0,
          //'fill':'blue',
          //'stroke':'red',
          'id':function(d,i) {return 'edgepath'+i;}})
    .style("stroke",function(d){
         var lineColor;
         //根据关系的不同设置线条颜色
         if(d.rela=="上位产品" || d.rela=="上游" || d.rela=="下位产品"){
             lineColor="#A254A2";
         }else if(d.rela=="主营产品"){
             lineColor="#B43232";
         }
         return lineColor;
     })
    .style("pointer-events", "none")
    .style("stroke-width",0.5)//线条粗细
    .attr("marker-end", "url(#resolved)" );//根据箭头标记的id号标记箭头


var edges_text = svg.append("g").selectAll(".edgelabel")
.data(force.links())
.enter()
.append("text")
.style("pointer-events", "none")
//.attr("class","linetext")
.attr({  'class':'edgelabel',
               'id':function(d,i){return 'edgepath'+i;},
               'dx':80,
               'dy':0
               //'font-size':10,
               //'fill':'#aaa'
               });


//设置线条上的文字
edges_text.append('textPath')
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
.style("pointer-events", "none")
.text(function(d){return d.rela;});


//圆圈
var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())//表示使用force.nodes数据
    .enter().append("circle")
    .style("fill",function(node){
        var color;//圆圈背景色
        var link=links[node.index];
        if(node.name==link.source.name && link.rela=="主营产品"){
            color="#F6E8E9";
        }else{
            color="#F9EBF9";
        }
        return color;
    })
    .style('stroke',function(node){ 
        var color;//圆圈线条的颜色
        var link=links[node.index];
        if(node.name==link.source.name && link.rela=="主营产品"){
            color="#B43232";
        }else{
            color="#A254A2";
        }
        return color;
    })
    .attr("r", 28)//设置圆圈半径
    .on("click",function(node){
        //单击时让连接线加粗
        edges_line.style("stroke-width",function(line){
            console.log(line);
            if(line.source.name==node.name || line.target.name==node.name){
                return 4;
            }else{
                return 0.5;
            }
        });
        //d3.select(this).style('stroke-width',2);
    })
    .call(force.drag);//将当前选中的元素传到drag函数中，使顶点可以被拖动
    /*
     circle.append("text")  
    .attr("dy", ".35em")  
    .attr("text-anchor", "middle")//在圆圈内添加文字  
    .text(function(d) { 
        //console.log(d);
        return d.name; 
    }); */ 


  //圆圈的提示文字
  circle.append("svg:title")  
        .text(function(node) { 
            var link=links[node.index];
            if(node.name==link.source.name && link.rela=="主营产品"){
                return "双击可查看详情"
            }
         });  
/* 矩形
var rect=svg.append("rect")
         .attr({"x":100,"y":100,
                "width":100,"height":50,
                "rx":5,//水平圆角
                "ry":10//竖直圆角
             })
          .style({
             "stroke":"red",
             "stroke-width":1,
             "fill":"yellow"
});*/
var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    //返回缺失元素的占位对象（placeholder），指向绑定的数据中比选定元素集多出的一部分元素。
    .enter()
    .append("text")
    .attr("dy", ".35em")  
    .attr("text-anchor", "middle")//在圆圈中加上数据  
    .style('fill',function(node){
        var color;//文字颜色
        var link=links[node.index];
        if(node.name==link.source.name && link.rela=="主营产品"){
            color="#B43232";
        }else{
            color="#A254A2";
        }
        return color;
    }).attr('x',function(d){
        // console.log(d.name+"---"+ d.name.length);
        var re_en = /[a-zA-Z]+/g;
        //如果是全英文，不换行
        if(d.name.match(re_en)){
             d3.select(this).append('tspan')
             .attr('x',0)
             .attr('y',2)
             .text(function(){return d.name;});
        }
        //如果小于四个字符，不换行
        else if(d.name.length<=4){
             d3.select(this).append('tspan')
            .attr('x',0)
            .attr('y',2)
            .text(function(){return d.name;});
        }else{
            var top=d.name.substring(0,4);
            var bot=d.name.substring(4,d.name.length);


            d3.select(this).text(function(){return '';});


            d3.select(this).append('tspan')
                .attr('x',0)
                .attr('y',-7)
                .text(function(){return top;});


            d3.select(this).append('tspan')
                .attr('x',0)
                .attr('y',10)
                .text(function(){return bot;});
        }
        //直接显示文字    
        /*.text(function(d) { 
        return d.name; */
    });


/*  将文字显示在圆圈的外面 
var text2 = svg.append("g").selectAll("text")
     .data(force.links())
    //返回缺失元素的占位对象（placeholder），指向绑定的数据中比选定元素集多出的一部分元素。
    .enter()
    .append("text")
    .attr("x", 150)//设置文字坐标
    .attr("y", ".50em")
    .text(function(d) { 
        //console.log(d);
        //return d.name; 
        //return d.rela;
        console.log(d);
        return  '1111';
    });*/


function tick() {
  //path.attr("d", linkArc);//连接线
  circle.attr("transform", transform1);//圆圈
  text.attr("transform", transform2);//顶点文字
  //edges_text.attr("transform", transform3);
  //text2.attr("d", linkArc);//连接线文字
  //console.log("text2...................");
  //console.log(text2);
  //edges_line.attr("x1",function(d){ return d.source.x; });
  //edges_line.attr("y1",function(d){ return d.source.y; });
  //edges_line.attr("x2",function(d){ return d.target.x; });
  //edges_line.attr("y2",function(d){ return d.target.y; });
    
  //edges_line.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
  //edges_line.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });




  edges_line.attr('d', function(d) { 
      var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
      return path;
  });  
    
  edges_text.attr('transform',function(d,i){
        if (d.target.x<d.source.x){
            bbox = this.getBBox();
            rx = bbox.x+bbox.width/2;
            ry = bbox.y+bbox.height/2;
            return 'rotate(180 '+rx+' '+ry+')';
        }
        else {
            return 'rotate(0)';
        }
   });
}


//设置连接线的坐标,使用椭圆弧路径段双向编码
function linkArc(d) {
    //var dx = d.target.x - d.source.x,
  // dy = d.target.y - d.source.y,
     // dr = Math.sqrt(dx * dx + dy * dy);
  //return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  //打点path格式是：Msource.x,source.yArr00,1target.x,target.y  
  
  return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y
}
//设置圆圈和文字的坐标
function transform1(d) {
  return "translate(" + d.x + "," + d.y + ")";
}
function transform2(d) {
      return "translate(" + (d.x) + "," + d.y + ")";
}






</script>
小飞侠-2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
52.在vue中使用d3创建力导向图并动态新增、删除节点及联系
银河与猫的博客
07-27 5524
1.安装d3 npm install d3 --save-dev 2.在页面中引入d3 import * as d3 from 'd3'
d3-force
X01动力装甲的专栏
07-29 1582
运用原力吧，路克！ https://github.com/d3/d3-force/tree/v1.2.1#simulation_nodes 这个模块实现了用以模拟粒子物理运动的 velocity Verlet 数值积分器。仿真思路如下: 它假设任意单位时间步长 Δt = 1，所有的粒子的单位质量常量 m = 1。作用在每个粒子上的合力 F 相当于在单位时间 Δt 内的恒定加速度 a。并且可以简单的通过为每个粒子添加速度并计算粒子的位置来模拟仿真。 在信息可视化领域，物理仿真在研究 networks 和 hi
d3-force力导引布局原理与剖析(一)
超神冉
09-25 8953
在数据可视化中，我们往往会使用图来表达数据中所蕴含的信息。而图布局算法可以使散乱的信息 (信息多以点线的关系承载) 通过一种清晰的方式呈现出来，并符合相应的美学标准。在图布局算法模型中，其建立在粒子物理理论的基础上，将节点模拟成为原子，通过原子间的引力和斥力来得到节点的速度与加速度，计算其移动方位与距离，最终达到一个稳定平衡的状态，从而完成布局。以下就是由 d3 实现的力引导布局: 在 d3...
d3-force 力导图 源码解读与原理分析【一】
weixin_33738982的博客
03-05 385
首先先推荐一下某呆翻译的d3-force的中文文档：https://github.com/xswei/D3-V... 。 在我们解读源码前还请读者先熟悉一下force相关的API,以及es6语法 . 如有分析不当之处还请留言指出，谢谢~ 那我们进入正题吧 D3-force 有什么 我们来看一下index.js 这个文件大家可以理解为for...
d3-force-3d demo
X01动力装甲的专栏
11-20 1104
d3-force-3d demo 用d3-force-3d开发的拓扑明显感觉不对，于是又又写了一个最简单的demo来测试一下。因为是3d，所以需要一个3d的框架来测试。 测试数据结构是这样，这是2d svg绘制的效果。 生成的3d的样子是下面这样。当时数据没有变化的时候，每次生成的结果是一样的，结构相当稳定。 下面是用three.js来绘制的3d效果。 再来测试下1024个节点的效果： 很快就稳定了下来，随机的数据效果还不错。 核心代码： const simulation = d3d .for
d3.V4版本本地引入文件
07-21
d3本地引入文件
D3Dhook通杀通杀所有DirectX版本_D3Dhook通杀所有DirectX版本_d3dhook_
09-29
D3D hook通杀所有系统win xp -win 8.1 通杀所有DirectX版本
d3d-sdk(x86版本)
11-26
d3d-sdk(x86版本)，做音视频开发的经常会用到。
d3可视化实战
04-03
是文字版本，数据可视化是展示数据的重要手段，广泛适用于数据分析、计量统计、演讲展示和各种网 站应用。而通过浏览器来呈现数据不受平台限制，任何计算机只要能上网就可以看到漂亮的交 互式图表。本书将带领读者...
D3可视化史上最全中文文档
11-22
不解释，想看的就下载吧。可视化神书！
D3js横向纵向关系图（加箭头，连接线文字描述，折叠）
07-25
使用d3.js绘制组织关系图，有横向和纵向的以及箭头流向，连接线文字描述，层级折叠。
前端项目-d3-force.zip
09-02
前端项目-d3-force,使用速度Verlet积分的力导向图布局。
多个D3.js Force图完美demo（带样式）
06-21
多个D3.js Force图完美demo（带样式）
D3.js 4.x Data Visualization - Third Edition
05-04
D3.js 4.x Data Visualization - Third Edition by Andrew Rininsland English | 28 Apr. 2017 | ASIN: B01MG90SSJ | 308 Pages | AZW3 | 6.6 MB Key Features Build interactive and rich graphics and visualization using JavaScript`s powerful library D3.js Learn D3 from the ground up, using the all-new version 4 of the library Gain insight into producing high-quality, extensible charts and visualizations using best practices such as writing testable, extensible code and strong typing Book Description Want to get started with impressive interactive visualizations and implement them in your daily tasks? This book offers the perfect solution-D3.js. It has emerged as the most popular tool for data visualization. This book will teach you how to implement the features of the latest version of D3 while writing JavaScript using the newest tools and technique You will start by setting up the D3 environment and making your first basic bar chart. You will then build stunning SVG and Canvas-based data visualizations while writing testable, extensible code,as accurate and informative as it is visually stimulating. Step-by-step examples walk you through creating, integrating, and debugging different types of visualization and will have you building basic visualizations (such as bar, line, and scatter graphs) in no time. By the end of this book, you will have mastered the techniques necessary to successfully visualize data and will be ready to use D3 to transform any data into an engaging and sophisticated visualization. What you will learn Map data to visual elements using D3's scales Draw SVG elements using D3's shape generators Transform data using D3's collection methods Use D3's various layout patterns to quickly generate various common types of chart Write modern JavaScript using ES2017 and Babel Explore the basics of unit testing D3 visualizations using Mocha and Chai Write and deploy a simple Node.js web service to render charts via HTML Canvas Understand what makes a good data visualization and how to use the tools at your disposal to create accurate charts About the Author Andrew Rininsland is a developer and journalist who has spent much of the last half a decade building interactive content for newspapers such as The Financial Times, The Times, Sunday Times, The Economist, and The Guardian. During his 3 years at The Times and Sunday Times, he worked on all kinds of editorial projects, ranging from obituaries of figures such as Nelson Mandela to high-profile, data-driven investigations such as The Doping Scandal the largest leak of sporting blood test data in history. He is currently a senior developer with the interactive graphics team at the Financial Times. Swizec Teller, author of Data Visualization with d3.js, is a geek with a hat. He founded his first start-up at the age of 21 years and is now looking for the next big idea as a full-stack Web generalist focusing on freelancing for early-stage start-up companies. When he isn't coding, he's usually blogging, writing books, or giving talks at various non-conference events in Slovenia and nearby countries. He is still looking for a chance to speak at a big international conference. In November 2012, he started writing Why Programmers Work At Night, and set out on a quest to improve the lives of developers everywhere. Table of Contents Getting Started with D3, ES2017, and Node.js A Primer on DOM, SVG, and CSS Shape Primitives of D3 Making Data Useful Defining the User Experience - Animation and Interaction Hierarchical Layouts of D3 The Other Layouts D3 on the Server with Canvas, Koa 2, and Node.js Having Confidence in Your Visualizations Designing Good Data Visualizations
d3.js 搭建 d3-force-directed-graph 例子
sinat_28371057的博客
10-22 897
d3.js 搭建 d3-force-directed-graph 例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/jqu.
在 NebulaGraph Studio 中的D3力导向图布局优化（D3-Force Directed Graph）
最新发布
fbchen的专栏
07-24 403
分享D3力导向图布局（D3-Force）中的优化案例
D3最新版本实现组织型tree结构，包含拖拽、缩放、平移、折叠、异步加载节点自定义渲染等功能
qq_44621394的博客
08-04 1520
import { PureComponent } from 'react' import { D3 } from "@weapp/ui" let d3: any = null; //辅助函数: 递归获取tree的节点数量 function getCount(parent: any) { var count = 0; if (Array.isArray(parent.children)) { count += parent.children.length; parent.chil..
技术分享——用D3.js框架V5版本入门基础
qq610886634的专栏
04-03 437
#技术分享——用D3.js框架V5版本入门基础 ##一、前言 ​ 在最近公司项目中，因为需求原因需要使用D3.js实现力导向图。所以花了一些时间对D3.js这个绘制图表的框架进行了研究。 和Echarts相比D3的优势在于： 使用svg绘制图形，不依赖分辨率； 支持事件处理器，能满足交互较复杂的需求； 基于xml绘制图形，可以操作dom 缺点在于： 支持IE9以上的主流浏览器，...
D3 关联关系图 力学图
肖皓文
01-02 6469
经常分享天眼查 企查查 的一些好的可视化图，是因为本人也是在一家相同性质公司搬砖 经常会被产品强制性要求仿做某个效果图。分享出来就是希望可以帮到大家。有问题 我看到不忙的时候我会回复。 首先该图中信息属于公示信息 不违法也不牵扯机密。 图1 这个是仿照其查查的关联关系图做的 因为本公司数据量小 没有采用企查查做法。当然我之前也吧企查查代码拔下来了参考了下。下面图2 这个是企查查 话不多说...
d3heatmap 包的R版本
05-20
d3heatmap包是一个R语言的包，用于创建交互式的热图和分级热图。它的安装方式如下： ```r install.packages("d3heatmap") ``` 使用时可以按照以下步骤： 1. 载入d3heatmap包： ```r library(d3heatmap) ``` 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值