d3.js实现隐藏部分关系

最新推荐文章于 2024-08-12 08:35:44 发布
最新推荐文章于 2024-08-12 08:35:44 发布
阅读量2.8k 收藏 5
点赞数
分类专栏： d3.js干货 文章标签： d3.js隐藏部分关系 d3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songxiaolingbaobao/article/details/81197093
版权

如果用d3画人物图的话，这个问题会经常遇到。

例如：人物A和人物B之间的关系有：同学、亲戚、同事；人物A和人物C之间的关系有：同学、同事；

需求：不想看到亲戚关系。（为什么会有这样的需求：节点多了后，各种复杂关系都显示出来了，看着就密密麻麻，隐藏部分关系后，看起来就清爽多了）

原始图：                                                                                 隐藏“亲戚”关系后的图：

要实现这样的隐藏部分关系效果的解决方案：

（1）修改json文件：方法：把“亲戚”所在的关系进行处理，relation.replace("亲戚"，“”)，重新加载一次json文件。

缺点：界面相当于重新绘制了一遍，用户体验不太好，尤其是你的人物关系图是动态的时候。

难易程度：简单

（2）界面刷新：方法：遍历每条线上的关系，找到“亲戚”所在的关系，标记“亲戚”(添加一个类)，然后设置该类不可见。

优点：界面没有进行刷新，用户体验比较好

优点：要给一个文字关系添加一个类

难易程度：困难

以上是我的两个解决问题的思路。

方案一代码：

<html>
<head>
    <meta charset="utf-8">  
    <title>隐藏部分关系通过切换json文件</title>  
  <style>

.nodetext {
    font-size: 12px ;
    font-family: SimSun;
    fill:#000000;
}

.linetext {
    font-size: 12px ;
    font-family: SimSun;
    fill:#1f77b4;
}

.circleImg {
  stroke: #ff7f0e;
  stroke-width: 1.5px;
}
</style></head> 

    <body>  
    	<div class="lay" style="position: fixed;top: 20px;left: 20px;">
			<button id="button">隐藏   亲戚  关系</button>
		</div>
		
        <script src="d3.js" type="text/javascript" charset="utf-8"></script>
        <script>     
        var data1 = "data1.json";
        var data2 = "data2.json";
        
        var width = 900;
        var height = 800;
        var img_w = 77;
        var img_h = 80;
        var radius = 30;    
        var svg = d3.select("body").append("svg")
                                .attr("width",width)
                                .attr("height",height);
        function updatesvg(soursefile){
        	d3.select("svg").selectAll("*").remove();
        	d3.json(soursefile,function(error,root){
            if( error ){
                return console.log(error);
            }
            console.log(root);
            //D3力导向布局
            var force = d3.layout.force()
                            .nodes(root.nodes)
                            .links(root.edges)
                            .size([width,height])
                            .linkDistance(200)
                            .charge(-1500)
                            .start();
            //边             
            var edges_line = svg.selectAll("line")
                                .data(root.edges)
                                .enter()
                                .append("line")
                                .style("stroke","#ccc")
                                .style("stroke-width",1);
            //边上的文字（人物之间的关系）            
            var edges_text = svg.selectAll(".linetext")
                                .data(root.edges)
                                .enter()
                                .append("text")
                                .attr("class","linetext")
                                .style("display","block")
                                .style("color","red")
                                .text(function(d){
                                    return d.relation;
                                });
            // 圆形图片节点（人物头像）
            var nodes_img = svg.selectAll("image")
                                .data(root.nodes)
                                .enter()
                                .append("circle")
                                .attr("class", "circleImg")
                                .attr("r", radius)
                                .attr("fill", function(d, i){
                                    //创建圆形图片
                                    var defs = svg.append("defs").attr("id", "imgdefs")
                                    var catpattern = defs.append("pattern")
                                                            .attr("id", "catpattern" + i)
                                                            .attr("height", 1)
                                                            .attr("width", 1)
                                    catpattern.append("image")
                                            .attr("x", - (img_w / 2 - radius))
                                            .attr("y", - (img_h / 2 - radius))
                                            .attr("width", img_w)
                                            .attr("height", img_h)
                                            .attr("xlink:href", d.image)
                                    return "url(#catpattern" + i + ")";

                                })
                                .call(force.drag);
            var text_dx = -20;
            var text_dy = 20;
            var nodes_text = svg.selectAll(".nodetext")
                                .data(root.nodes)
                                .enter()
                                .append("text")
                                .attr("class","nodetext")
                                .attr("dx",text_dx)
                                .attr("dy",text_dy)
                                .text(function(d){
                                    return d.name;
                                });
            force.on("tick", function(){
                 //更新连接线的位置
                 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_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
                 edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });
                 //更新结点图片和文字
                 nodes_img.attr("cx",function(d){ return d.x });
                 nodes_img.attr("cy",function(d){ return d.y });
                 //联系
                 nodes_text.attr("x",function(d){ return d.x });
                 nodes_text.attr("y",function(d){ return d.y + img_w/2; });
            });
        });
        }
        updatesvg(data1);
		var btn = document.getElementById("button");
		btn.onclick = function(){
			//这里应该要遍历json文件，找到"亲戚"再删除后生成新的json，再作为参数传递
			var data3 = "data3.json";
			updatesvg(data3);
		}
        </script>  
</body>
</html>

通过改动json文件来实现部分隐藏，此时要复原就基本不可能了。

于是测试第二种方案。目前我把包含“亲戚”的关系都隐藏起来了，并未实现部分隐藏，希望大家改进改进，共同学习。如果我解决了，也会及时更新。

以下是代码：

<html>
<head>
    <meta charset="utf-8">  
    <title>隐藏部分关系</title>  
  <style>

.nodetext {
    font-size: 12px ;
    font-family: SimSun;
    fill:#000000;
}

.linetext {
    font-size: 12px ;
    font-family: SimSun;
    fill:#1f77b4;
}

.baohan{
	display: none;
	opacity: 0;
}
.circleImg {
  stroke: #ff7f0e;
  stroke-width: 1.5px;
}

</style></head> 

    <body>  
    	<div class="lay" style="position: fixed;top: 20px;left: 20px;">
			<button id="button3">隐藏 亲戚 关系</button>
			<button id="button4">显示 亲戚 关系</button>
		</div>
		
        <script src="d3.js" type="text/javascript" charset="utf-8"></script>
        <script>     
        var data1 = "data1.json";
        var data2 = "data2.json";
        
        var width = 900;
        var height = 800;
        var img_w = 77;
        var img_h = 80;
        var radius = 30;    
        var svg = d3.select("body").append("svg")
                                .attr("width",width)
                                .attr("height",height);
        function updatesvg(soursefile){
        	d3.select("svg").selectAll("*").remove();
        	d3.json(soursefile,function(error,root){
            if( error ){
                return console.log(error);
            }
            console.log(root);
            //D3力导向布局
            var force = d3.layout.force()
                            .nodes(root.nodes)
                            .links(root.edges)
                            .size([width,height])
                            .linkDistance(200)
                            .charge(-1500)
                            .start();
            //边             
            var edges_line = svg.selectAll("line")
                                .data(root.edges)
                                .enter()
                                .append("line")
                                .style("stroke","#ccc")
                                .style("stroke-width",1);
            //边上的文字（人物之间的关系）            
            var edges_text = svg.selectAll(".linetext")
                                .data(root.edges)
                                .enter()
                                .append("text")
                                .attr("class","linetext")
                                .style("display","block")
                                .style("color","red")
                                .text(function(d){
                                    return d.relation;
                                });
            // 圆形图片节点（人物头像）
            var nodes_img = svg.selectAll("image")
                                .data(root.nodes)
                                .enter()
                                .append("circle")
                                .attr("class", "circleImg")
                                .attr("r", radius)
                                .attr("fill", function(d, i){
                                    //创建圆形图片
                                    var defs = svg.append("defs").attr("id", "imgdefs")
                                    var catpattern = defs.append("pattern")
                                                            .attr("id", "catpattern" + i)
                                                            .attr("height", 1)
                                                            .attr("width", 1)
                                    catpattern.append("image")
                                            .attr("x", - (img_w / 2 - radius))
                                            .attr("y", - (img_h / 2 - radius))
                                            .attr("width", img_w)
                                            .attr("height", img_h)
                                            .attr("xlink:href", d.image)
                                    return "url(#catpattern" + i + ")";

                                })
                                .call(force.drag);
            var text_dx = -20;
            var text_dy = 20;
            var nodes_text = svg.selectAll(".nodetext")
                                .data(root.nodes)
                                .enter()
                                .append("text")
                                .attr("class","nodetext")
                                .attr("dx",text_dx)
                                .attr("dy",text_dy)
                                .text(function(d){
                                    return d.name;
                                });
            force.on("tick", function(){
                 //更新连接线的位置
                 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_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
                 edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });
                 //更新结点图片和文字
                 nodes_img.attr("cx",function(d){ return d.x });
                 nodes_img.attr("cy",function(d){ return d.y });
                 //联系
                 nodes_text.attr("x",function(d){ return d.x });
                 nodes_text.attr("y",function(d){ return d.y + img_w/2; });
            });
            document.getElementById("button3").onclick = function(){
	            d3.selectAll(".linetext").each(function(d,i){
					console.log("关系："+d.relation);
					if(d.relation.indexOf("亲戚")>-1){
						console.log("包含：亲戚");
						var result = d.relation.replace("亲戚", "");
						console.log("替换后的结果："+result);
						d3.select(this).attr("class","linetext baohan")
					}
				})
            }
            document.getElementById("button4").onclick = function(){
	            d3.selectAll(".linetext").each(function(d,i){
					console.log("关系："+d.relation);
					if(d.relation.indexOf("亲戚")>-1){
						console.log("包含：亲戚");
						var result = d.relation.replace("亲戚", "");
						console.log("替换后的结果："+result);
						d3.select(this).attr("class","linetext")
					}
				})
            }
        });
        }
        updatesvg(data1);
        </script>  
</body>
</html>

附：json文件

data1.json：

{
	"nodes":[
	{ "name": "测试1"   , "image" : "renwu.jpg" },
	{ "name": "测试2"   , "image" : "renwu.jpg" },
	{ "name": "测试3"   , "image" : "renwu.jpg" }
	],
	"edges":[
	{ "source": 0 , "target": 1 , "relation":"同学 同事 亲戚" },
	{ "source": 0 , "target": 2 , "relation":"同学 同事 " }
	]
}

data3.json:

{
	"nodes":[
	{ "name": "测试1"   , "image" : "renwu.jpg" },
	{ "name": "测试2"   , "image" : "renwu.jpg" },
	{ "name": "测试3" , "image" : "renwu.jpg" }
	],
	"edges":[
	{ "source": 0 , "target": 1 , "relation":"同学 同事" },
	{ "source": 0 , "target": 2 , "relation":"同学 同事" }
	]
}

以上是我在7月25做的，但是并没有实现我想要的结果，今天实在是气不过，花了时间，效果还没有出来。于是我又做了调整，终于实现了预想的设计图：

代码附上：

<html>
<head>
    <meta charset="utf-8">  
    <title>隐藏部分关系</title>  
  <style>

.nodetext {
    font-size: 12px ;
    font-family: SimSun;
    fill:#000000;
}

.linetext {
    font-size: 12px ;
    font-family: SimSun;
    fill:#1f77b4;
}

.circleImg {
  stroke: #ff7f0e;
  stroke-width: 1.5px;
}

.btn{
	position: fixed;
	top: 50px;
	left: 20px;
}
.btn2{
	position: fixed;
	top: 100px;
	left: 20px;
}
.btn3{
	position: fixed;
	top: 150px;
	left: 20px;
}
.btn4{
	position: fixed;
	top: 200px;
	left: 20px;
}
.baohan{
	display: none;
	opacity: 0;
}
.unbaohan{
	display: block;
	opacity: 1;
}
</style></head> 
    <body>  
    	<p>我想点击按钮，把“挚友”关系删掉</p>
    	<hr />
    	<button id="btn" class="btn">隐藏 挚友 关系</button>
    	<button id="btn2" class="btn2">显示 挚友 关系</button>
    	<button id="btn3" class="btn3">隐藏 同学 关系</button>
    	<button id="btn4" class="btn4">显示 同学 关系</button>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>           
        var width = 900;
        var height = 800;
        var img_w = 77;
        var img_h = 80;
        var radius = 30;    
        var svg = d3.select("body").append("svg")
                                .attr("width",width)
                                .attr("height",height);
        d3.json("json/relation.json",function(error,root){
            if( error ){
                return console.log(error);
            }
            console.log(root);
            createD3(root);
        });
        function createD3(root){
        	//D3力导向布局
            var force = d3.layout.force()
                            .nodes(root.nodes)
                            .links(root.edges)
                            .size([width,height])
                            .linkDistance(200)
                            .charge(-1500)
                            .start();
            //边             
            var edges_line = svg.selectAll("line")
                                .data(root.edges)
                                .enter()
                                .append("line")
                                .style("stroke","#ccc")
                                .style("stroke-width",1);
            //边上的文字（人物之间的关系）            
            var edges_text = svg.selectAll(".linetext")
                                .data(root.edges)
                                .enter()
                                .append("text")
                                .attr("class","linetext")
                                .style("display","block")
                                .style("color","red")
                                .text(function(d){
                                    return d.relation;
                                });
            // 圆形图片节点（人物头像）
            var nodes_img = svg.selectAll("image")
                                .data(root.nodes)
                                .enter()
                                .append("circle")
                                .attr("class", "circleImg")
                                .attr("r", radius)
                                .attr("fill", function(d, i){
                                    //创建圆形图片
                                    var defs = svg.append("defs").attr("id", "imgdefs")
                                    var catpattern = defs.append("pattern")
                                                            .attr("id", "catpattern" + i)
                                                            .attr("height", 1)
                                                            .attr("width", 1)
                                    catpattern.append("image")
                                            .attr("x", - (img_w / 2 - radius))
                                            .attr("y", - (img_h / 2 - radius))
                                            .attr("width", img_w)
                                            .attr("height", img_h)
                                            .attr("xlink:href", d.image)
                                    return "url(#catpattern" + i + ")";

                                })
                                .call(force.drag);
            var text_dx = -20;
            var text_dy = 20;
            var nodes_text = svg.selectAll(".nodetext")
                                .data(root.nodes)
                                .enter()
                                .append("text")
                                .attr("class","nodetext")
                                .attr("dx",text_dx)
                                .attr("dy",text_dy)
                                .text(function(d){
                                    return d.name;
                                });
            force.on("tick", function(){
                 //更新连接线的位置
                 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_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
                 edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });
                 //更新结点图片和文字
                 nodes_img.attr("cx",function(d){ return d.x });
                 nodes_img.attr("cy",function(d){ return d.y });
                 //联系
                 nodes_text.attr("x",function(d){ return d.x });
                 nodes_text.attr("y",function(d){ return d.y + img_w/2; });
            });
        }
        document.getElementById("btn").onclick = function(){
            xx("挚友",true)
        }
        document.getElementById("btn2").onclick = function(){
        	xx("挚友",false)
        }
        document.getElementById("btn3").onclick = function(){
           xx("同学",true)
        }
        document.getElementById("btn4").onclick = function(){
           xx("同学",false)
        }
        function xx(info,flag){
        	d3.selectAll(".linetext").each(function(d,i){
        		var old = d3.select(this).text();
				if(flag){
					if(d.relation.indexOf(info)>-1){
						var result = old.replace(info,"");
						d3.select(this).text(result);
					}
				}else{
					if(d.relation.indexOf(info)>-1){
						if(old.indexOf(info)>-1){
							d3.select(this).text(old);
						}else{
							d3.select(this).text(old+" "+info);
						}
					}
				}
			})
        }
        </script>  
</body>
</html>

其中xx函数是实现的核心函数。效果非常好，高兴之余，也分享给大家！

以秘
关注
专栏目录
d3.js实现组织架构图
皮卡丘
12-29 979
1、效果 2、安装依赖 npm install d3 --save-dev 3、粘贴代码 <template> <div id="appc" style="height: 650px"></div> </template> <script> import * as $d3 from "d3"; export default { name: "legalperson", data() { return { d3:
基于D3.js的企业关联图谱——风控可视化
李姆斯的博客
01-30 2202
说明 项目背景 分析企业自身的主要数据，企业与企业、企业与个人、个人与个人之间的关系数据，建设企业的关联关系图谱，识别对公客户的关联关系，并找出关联关系中的风险点。 代码说明 以下代码将是我GitHub中的其中一个页面，主要目的是展示企业之间的担保关系，其他关系的代码可以以此进行推演。主要框架是D3.js 开源地址（有用的话记得follow一下并点个star哦） https://github.com/lebron-li/Visualization-of-risk-control-based-on
d3实现部分关系隐藏与显示
08-02
d3实现部分关系隐藏与显示。例如：AB之间的关系有：朋友、亲戚、同学，我想要把朋友隐藏起来，又不改变json文件（这样的好处是不刷新界面，用户体验好）。
隐藏html文本节点,javascript-D3-仅显示/隐藏单击节点的文本
weixin_35529551的博客
06-04 440
我试图单击显示/隐藏D3中节点的文本.我尝试使用以下代码：var node = svg.selectAll(".node").data(json.nodes)(...)node.on("click", function() {if (textShowing) {node.select("text").style("visibility", "hidden");} else {node.select...
D3.js 教程 - 带你探索数据可视化的世界
最新发布
gitblog_01119的博客
08-12 294
D3.js 教程 - 带你探索数据可视化的世界 d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址:https://gitcode.com/gh_mirrors/d3/d3 1. 项目介绍 D3.js 是一个免费且开源的JavaScript库，专用于数据驱动...
display和visibility隐藏元素
风火一回，一生不毁
06-23 2113
隐藏元素的方式有很多种，最常用的是display:none；visibility:hidden；z-index:-9999； display display:none;隐藏一个元素，并释放掉该元素所占有的原有空间。即可以理解为:将该元素删除了，当display属性改变时再重新为元素分配空间，但原有的空间设置已不负存在。jquery的show()和hide()方法就是通过该属性来实现
d3之svg整体布局
偷得几日闲的博客
07-31 2545
目录目录 背景 svg svg的分部分背景body{ background-color:#333; }svgvar width = 1250; var height = 600; var svg =d3.select("body").append("svg") .attr("width",width) .attr("height",height) .appen
D3.js --- 刻度 ticks()总结
cxu123321的博客
06-03 3170
D3.js --- 刻度 ticks()总结 绿萝小仙女关注 2019.05.09 10:27:09字数 68阅读 1,335 刻度: ticks() 、tickSize() 、tickPadding()、 tickFormat() ticks(10) 设置刻度的个数为10 tickSize(12) 设置刻度的长度为12px,默认6px tickPadding(12) 设置刻度与数值之间的间隙为12px tickFormat(d3.format(".0%")) 设置刻度下的数值的格式 图解
D3js快速入门——用最新版D3js实现树图
weixin_46567428的博客
08-15 1万+
文章目录：引言1. D3js 是什么2. D3js 相对其他数据可视化方案的优势2.1 SVG 对比 Canvas2.2 D3.js 对比 Echarts3. 怎么用 D3.js 开发一个树图3.1 前置基础3.2 d3开发树图流程3.3 动手实现一个树图3.3.1 普通tide tree3.3.2 你的树图不简单—— radio tide tree3.3.3 更多可能——更多类型的树图 引言 上周我们组新开项目，技术调研之后决定使用 d3.js 做数据可视化开发，mentor让我来做初期技术调研，之后的技
echarts力导向图节点连线动画_D3.js 力导向图的显示优化（二）- 自定义功能
weixin_39744512的博客
11-20 716
摘要： 在本文中，我们将借助 D3.js 的灵活性这一优势，去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能：Nebula Graph 图探索的删除节点和缩放功能前言在上篇文章中（D3.js 力导向图的显示优化），我们说过 D3.js 在自定义图形上相较于其他开源可视化库的优势，以及如何对文档对象模型（DOM）进行灵活操作。既然 D3.js 辣么灵活，那是不是实现很多我们想做的事情...
d3.js 力导向图 关系连接线 使用 path 标签时不显示的问题
Paul_kelin
09-04 1039
浮点数格式采用IEEE-754标准（32），用四个字节共32位表示。传送顺序为先低字节后高字节，即传送顺序为：先低字节D7~D0，接着D15~D8，然后D23~D15，最后高字节D31~D24，最终作为分成8个ASCII码传送。浮点数格式如下： D31 D30~D23 D22~D0 浮点数符号位 ...
[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边（源码）
02-13
前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局，关系图谱基本构建。本篇文章将实现如下图所示的功能，主要包括： 1.建立两种模式，点击“节点”显示所有圆，点击“文字”显示实体名称 2.添加鼠标响应事件，选中某一个节点显示其相关的节点及边 3.鼠标放开恢复所有节点 --------------------- 作者：Eastmount 来源：CSDN 原文：https://blog.csdn.net/Eastmount/article/details/87116136 版权声明：本文为博主原创文章，转载请附上博文链接！
d3.js多重力导向图多条关系线
04-29
d3.js实现关系图，多条关系连线，关系说明居中。根据json参数自动生成关系图谱。
D3.js 介绍与入门
kang_k的博客
06-26 9607
D3.js（全称：Data-Driven Documents）数据驱动文档是一个基于数据驱动 DOM 的 JS 库。 相比EChart、G2...之类的封装好的图标库，D3就像一个Jquery。 封装了很多函数供开发者使用。
可视化库D3.js（1）-入门篇
热门推荐
尤尔小屋
05-04 1万+
从今天开始可视化库D3.js\color{red}{D3.js}D3.js的第一章-入门篇咯???? 什么是D3.js D3指的是Data-Driven Documents，js即Javascript，是后缀名。先看看官网上对D3.js库的定义： D3.js is a JavaScript library for manipulating documents based on data.D3 he...
使用D3.js进行数据可视化
m0_73500130的博客
05-03 2551
D3.js是一个流行的JavaScript数据可视化库，全称为Data-Driven Documents，即数据驱动文档。它以数据为核心，通过数据来驱动文档的展示和操作。D3.js提供了丰富的API和工具，使得开发者能够创建出各种交互式和动态的数据可视化效果。
D3.js(学习笔记）
CaiJin6a的博客
07-18 1420
D3.js中两大核心模块d3-selection、d3-scale的简要介绍
前端数据可视化：D3.js的实践
程序员光剑
01-05 1631
1.背景介绍 数据可视化是指将数据以图形、图表、图片的形式呈现给用户，以帮助用户更好地理解数据。随着数据的增长，数据可视化也越来越重要。前端数据可视化是指在网页上使用HTML、CSS、JavaScript等技术来呈现数据，以帮助用户更好地理解数据。D3.js是一个用于创建动态、交互式数据可视化的JavaScript库，它可以帮助我们更好地理解数据。 1.1 D3.js的发展历程 D3.js是...
数据可视化--D3.js入门（数据集与数据）
小芋儿的博客
08-14 3091
D3.js入门D3（Data-Driven Document）:数据驱动文档D3的优势：学习D3.js之间需要学习的：学习D3.js的网站：第一节：数据集与数据选择集：select()、selectAll()数据绑定：datum()、data()数组Array：映射Map：集合Set：嵌套结构Nest： D3（Data-Driven Document）:数据驱动文档 D3是一个JavaScript的数据库，是用来做数据可视化的。其中文档指的是DOM，即文档对象模型（Document Object Model
XAF中利用D3.JS实现关系视图：力导向图示例
在XAF（DevExpress eXpressApp Framework）中，D3.js是一个强大的JavaScript库，常用于数据可视化，特别是创建交互式的图表。本文档提供了一个实例，展示了如何在XAF应用中利用D3.js构建力导向图（通常用于展示人物...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值