d3.js tree 文字和线重叠

2024-11-09

d3.js之树形折叠树

1.效果 children和_children 2.技术分解 2.1折叠函数 // (1) 递归调用,有子孙的就把children(显示)给_children(不显示)暂存,便于折叠, function collapse(d) { if (d.children) { console.log(d); d._children = d.children; d._children.forEach(collapse); d.children = null; } } // 折叠根节点的每个孩子 root.c

d3.js制作连线动画图和编辑器

此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图编辑器效果如上图所示.本项目使用主要d3.jsv4制作,分两部分,一个是实际展示的连线动画图,另一个是管理人员使用鼠标编辑连线的页面.对于d3.js如何引入图片,如何画线等基础功能,这里就不再介绍了,大家可以找一些入门文章看一下.这里主要介绍一下重点问题. 1.连线动画图此图的主要功能是每隔给定时间,通过ajax请求后台数据,并根据返回的数据动态改变每个

D3.js力导向图中新增节点及新增关系连线示例

大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v4.min.js&qu

【 D3.js 高级系列 — 10.0 】思维导图

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有"树形".因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name:

springboot2.0+Neo4j+d3.js构建知识图谱

Welcome to the Neo4j wiki! 初衷这是一个知识图谱构建工具,最开始是对产品和领导为了做ppt临时要求配合做图谱展示的不厌其烦,做着做着就抽出一个目前看着还算通用的小工具技术栈小工具是前台是基于vue + d3.js ,后台是springboot配合Neo4j. 开发工具eclipse ,idea也能成功运行和发布源码https://github.com/MiracleTanC/Neo4j 演示demo地址:http://kg.miaoleyan.com/. 实现的基本

D3.js画思维导图（转）

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node

【 D3.js 高级系列 — 4.0 】矩阵树图

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据新建一个citygdp.j

【 D3.js 高级系列 — 2.0 】捆图

捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbostock/1044242 但是此例有些复杂,不太容易弄懂,而且也没有相应的说明文字(D3官网上的例大多没有相应文字解说),根本无法作为参考.本文提供一个简单的例子,讲解捆图到底是什么,应该怎么做. 捆图只有两个函数: d3.layout.bundle():创建一个捆图布局. bundle(link

数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

习·D3.js 学习资源汇总除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github主页:https://github.com/mbostock/d3/wiki 包括D3简介,案例,教程和公开课,以及之前提到的API参考等. Github教程页面:https://github.com/mbostock/d3/wiki/Tutorials -·-·-·-·-·-其他:-·-·-·-·

前端使用d3.js调用地图api 进行数据可视化

前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化.其实就是使用了第三方插件,比现在比较火的可视化插件d3.js echart.js.大致思路就是,把要用到的位置的geojson数据报错,然后本地调用这些数据,通过d3.js或者echart.js通过地图中的api把他显示到页面上,这样可以更直观更方便的进行预览,也就是现在比较火的数据可视化,也是未来前端发展的一个不错的方向.由于第一次做所以有些需要优化的地方自己可以根据需求优化.代码如下: html: <!DOCTYPE

使用JavaScript和D3.js实现数据可视化

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据驱动文档),并且它被称为一个互动和动态的数据可视化库网络.2011年2月首次发布,在撰写本文时,最新的稳定版本是4.4版本,并且不断更新.D3利用可缩放矢量图形或SVG格式,允许您渲染可放大或缩小的形状,线条和填充,而不会降低质量.本教程将指导您使用JavaScript D3库创建条形图. 准备为

基于cytoscape.js 、 d3.js实现的关系图谱初级版本

前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> <div style="width: 100%;height: 100%;"> <div id="MainCy" style="width: 100%;height: 100%;"></div> <div id

d3.js 地铁轨道交通项目实战

上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们先看一下百度官方线路图. 就是这样的,今天我们就来完成它的大部分需求,以及地铁公司爸爸提出来的需求. 需求如下:1.按照不同颜色显示地铁各线路,显示对应站点.2.用户可以点击手势缩放和平移(此项目为安卓开发).3.用户在线路menu里点击线路,对应线路平移值屏幕中心并高亮.4.根据后台数据,渲染问题

用D3.js画树状图

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

前言本文灵感来源于Mike Bostock 的一个 demo 页面原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束绿色实线: 专利已经授权实现下面让我们看看如何一步步实现上图的效果. 分析数据 [

d3.js制作条形时间范围选择器

此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html 效果如上图所示. 本项目使用主要d3.js v4制作,可以用来选择两年的时间范围,两端按钮切换年,在时间轴上标注可以选择的时间范围和关键时间点.时间数据可以在前端配置,也可以从后端请求. 此程序相对比较简单,主要涉及d3的比例尺和拖动处理. 1)d3的比例尺其实就是把一个范围的数据映射到另一个范围的数据上此处,我们使用线性比例尺:d3.scaleLinear() 它可

D3.js学习（一）

从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有错误的还希望同学们帮我指出来.当然了, 可以的话我希望大家都可以去看看英文资料(文章后面将列英文资源),毕竟那才是原汁原味的D3. 好了, 废话到此,下面我们开始我们的学习之旅吧! 什么是D3.js? 一句话:D3.js是一个操纵数据的javascript库! 从一个简单的例子开始学习一个新的东西

d3.js读书笔记-1

d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定到文档中(这里的文档指的是html文档)的元素,根据需要创建新元素: 解析每个元素范围内的数据并为其设置相应的可视化属性,实现元素的变换(transforming); 响应用户输入实现元素状态的过渡(transitioning); SVG D3最适合用来生成和操作SVG(Scalable Vecto

【 D3.js 入门系列 --- 3 】做一个简单的图表！

前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下,内容很少,很快就能掌握,不需要记住各种标签,只要知道大概是什么就行,用的时候再查. 先看下面的代码: <script src="

【 D3.js 入门系列 --- 2.1 】关于如何选择，插入，删除元素

在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同时操作) 来看一个具体的例子,现有如下代码: <html> <head> <meta charset="utf-8"> <title>select,append,exit</title> </head> </

【 D3.js 入门系列 --- 2 】如何使用数据和选择元素

接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat","I like snake"]; 要用这三个字符串

d3.js tree 文字和线重叠

热门专题