【免费】d3+jQuery类型关系图谱_d3+jquery资源-CSDN文库

共4个文件

html：2个

css：1个

js：1个

jquery

html

d3.js

知识图谱

需积分: 0 7 浏览量 2020-09-30 10:15:45 上传评论收藏 40KB ZIP 举报

在IT领域，数据可视化是至关重要的工具，尤其在分析复杂的关系和组织结构时。"d3+jQuery类型关系图谱"就是一个这样的工具，它结合了强大的d3.js库和广泛使用的jQuery框架，用于创建交互式的组织架构图。这种图谱类似于商业调查工具如天眼查和企查查中的股权图，帮助用户清晰地理解公司之间的关联和股权结构。 d3.js（Data-Driven Documents）是由Mike Bostock开发的一个JavaScript库，专门用于数据可视化。它允许开发者用数据绑定DOM（文档对象模型）元素，并通过数据的变化驱动视觉表示。d3.js的强大之处在于其灵活性和可扩展性，可以创建各种复杂的图表和图形，包括力导向图、树图、桑基图等，而关系图谱正是其中之一。 jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。在d3.js的基础上引入jQuery，可以更轻松地实现页面交互，如事件监听、元素操作等，提高用户体验。在这个项目中，jQuery可能被用来处理用户的鼠标拖动和滚轮缩放等交互行为，使图谱的导航更加流畅。这个关系图谱代码提供了横版和竖版两种图形结构，以适应不同的展示需求和空间限制。横版通常适用于展示线性或水平的关系，而竖版则适合显示层级关系。这种多版本的设计使得开发者可以根据实际应用场景进行灵活调整。在实际应用中，这些图谱可以用于描绘公司组织结构、业务流程、社交网络或其他任何实体之间的关系。例如，你可以通过它来展示一个公司的管理层级，或者在研究行业时追踪供应链关系。支持鼠标拖动和滚轮缩放功能，使得用户能够自由探索图谱，查看不同层次的细节，从而更好地理解关系网络。为了实现这个功能，开发者可能使用了d3.js的布局算法，如tree布局或cluster布局，来自动计算节点的位置。同时，jQuery可能被用来监听鼠标的拖动和滚轮事件，更新图谱的视图。此外，图谱中的节点和边可能使用SVG（可缩放矢量图形）元素创建，这样在放大或缩小时能保持清晰。在学习和使用这个"关系图谱代码"时，你需要熟悉d3.js的基本语法，理解如何创建数据绑定、定义图形元素和设置交互行为。同时，对jQuery的掌握也很重要，以便利用其简化DOM操作和事件处理。如果你计划自定义图谱，还需要了解如何根据需求调整布局、样式和交互逻辑。 "d3+jQuery类型关系图谱"是一个强大且灵活的工具，结合了数据可视化和交互设计的精华，为理解和分析复杂关系提供了一种直观的方式。无论是为了工作还是学习，掌握这个技术都将极大地提升你在数据呈现和信息沟通方面的能力。

资源推荐

资源详情

资源评论

收起资源包目录

关系图谱代码.zip （4个子文件）

关系图谱代码

竖版

index.html 27KB

gqct.css 677B

jquery-3.3.1.min.js 85KB

横版

d3关系图谱.html 20KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta charset="utf-8"> <title>d3+jQuery股权穿透图</title> <script src="https://cdn.bootcss.com/d3/3.2.7/d3.min.js"></script> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div class="container" id="treecontainer"> <div class="menu"> <div id="product_tree"></div> </div> </body> <script type="text/javascript"> var container; var zoom; var rootData; var depthInfo; var rootName;//根节点名称 jQuery(document).ready(function () { /* resizeScreen();*/ //selectChange(); var child=document.getElementById("product_tree"); child.innerHTML = ''; getData(); }); var getData =function() { // 测试内容 rootData = { "downward": { "direction": "downward", "name": "origin", "children": [ { "name": "上海冰鉴企业征信服务有限公司", "amount": "50", "ratio": "55%", "hasHumanholding":true, "hasChildren":true, "isExpand": false, "children": [ { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "children": [] } ] }, { "name": "上海冰鉴企业征信服务有限公司11", "amount": "100", "ratio": "55%", "hasHumanholding":true, "hasChildren":true, "isExpand": false, "children": [ { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "children": [] } ] }, { "name": "北京冰鉴企业征信服务有限公司", "amount": "100", "ratio": "55%", "hasHumanholding":true, "hasChildren":true, "isExpand": false, "children": [ { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "children": [] } ] }, { "name": "成都量化金服大数据技术服务有限公司", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "children": [] }, { "name": "南京冰鉴信息科技有限公司", "hasHumanholding":false, "hasChildren":true, "isExpand": false, "amount": "100", "ratio": "55%", "children": [ { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] } ] } ] }, "upward": { "direction": "upward", "name": "origin", "children": [ { "name": "投资方", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [ { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "isExpand": false, "amount": "100", "ratio": "55%", "children": [ { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] } ] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "children": [] } ] } ] } } rootName = '我是根节点'; drawing(); }; var drawing = function() { var _this = this; // var rootName = ''; //根节点的名字 var rootRectWidth = 0; //根节点rect的宽度 var downwardLength = 0, upwardLength = 0; var forUpward = true var treeChart = function(d3Object) { this.d3 = d3Object; this.directions = ['upward', 'downward']; }; treeChart.pr

评论收藏

内容反馈