d3力导向图

最新推荐文章于 2024-01-28 10:30:00 发布
最新推荐文章于 2024-01-28 10:30:00 发布
阅读量247 收藏
点赞数
文章标签： d3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HaiRong_21/article/details/113107270
版权

d3力导向图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script type="text/javascript" src="../d3.js"></script>-->
    <script src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<style>
    svg{
        background-color: #ccc;
    }
</style>
<script>
    let dataset={
        nodes: [
            { name: "Adam" },
            { name: "Bob" },
            { name: "Carrie" },
            { name: "Donovan" },
            { name: "Edward" },
            { name: "Felicity" },
            { name: "George" },
            { name: "Hannah" },
            { name: "Iris" },
            { name: "Jerry" }
        ],
        edges: [
            { source: 0, target: 1 },
            { source: 0, target: 2 },
            { source: 0, target: 3 },
            { source: 0, target: 4 },
            { source: 1, target: 5 },
            { source: 2, target: 5 },
            { source: 2, target: 5 },
            { source: 3, target: 4 },
            { source: 5, target: 8 },
            { source: 5, target: 9 },
            { source: 6, target: 7 },
            { source: 7, target: 8 },
            { source: 8, target: 9 }
        ]
    }
    let width=800
    let height=500

    let svg=d3.select('body').append('svg').attr('width',width).attr('height',height)

    let force=d3.forceSimulation(dataset.nodes)
                .force('charge',d3.forceManyBody())
                .force('link',d3.forceLink(dataset.edges))
                .force('center',d3.forceCenter().x(width/2).y(height/2))

    let color=d3.scaleOrdinal(d3.schemeCategory10)

    let edges=svg.selectAll('line')
                .data(dataset.edges)
                .enter()
                .append('line')
                .style('stroke','red')
                .style('stroke-width',1)

    let nodes=svg.selectAll('.node')
                .data(dataset.nodes)
                .enter()
                .append('g')
                .call(d3.drag()
                .on('start',dragStarted)
                .on('drag',dragging)
                .on('end',dragEnded)
                )

    nodes.append('circle')
        .attr('r',15)
        .style('fill',function (d,i){
            return color(i)
        })

    nodes.append("text")
        // 文字内容
        .text(function (d) {
            return d.name;
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");

    force.on('tick',function (){
        edges.attr('x1',function (d){return d.source.x})
            .attr('y1',function (d){return d.source.y})
            .attr('x2',function (d){return d.target.x})
            .attr('y2',function (d){return d.target.y})
        // nodes.attr('cx',function (d){return d.x})
        //     .attr('cy',function (d){return d.y})
        d3.selectAll("circle")
            .attr("cx", function (d) {
                return d.x;
            })
            .attr("cy", function (d) {
                return d.y;
            });
        d3.selectAll("text")
            .attr("x", function (d) {
                return d.x;
            })
            .attr("y", function (d) {
                return d.y;
            });
    })

    function dragStarted(d){
        if(!d3.event.active) force.alphaTarget(0.3).restart()
        d.fx=d.x
        d.fy=d.y
    }
    function dragging(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragEnded(d) {
        if (!d3.event.active) force.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }
</script>
</body>
</html>
HaiRong_21
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3 笔记十：力导向图
JimmyLuo17的博客
08-15 3165
本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。一、力导向图我们先来了解一下力导向图（Force-Directed Graph）的定义。首先，它是绘图的一种算法。在二维或三维空间里配置节点。节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用。力的大小
d3力导向图增加节点_使用react如何搭建d3力导向图（详细教程）
weixin_29146599的博客
01-17 1063
本篇文章主要介绍了如何在react中搭建d3力导向图，现在分享给大家，也给大家做个参考。D3js力导向图搭建d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。版本：4.X安装和导入npm安装：npm insta...
D3——力导向图
wang_NiFeng的博客
12-21 8342
&lt;script type="text/javascript" src="http://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt; &lt;script&gt; var width = 800; var height = 800; var svg = d3.select("body") .append("s
d3 力导向图
热门推荐
小飞侠的博客
09-05 1万+
力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的。根据力的作用，来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。 力导向图能表示节点之间的多对多的关系。 数据
Vue D3 力导向图（推荐阅读）
hsany330的专栏
05-14 5129
1. 安装 前端工程根目录下执行yarn add d3，安装 d3 依赖包。安装的版本"d3": "^5.7.0" 2. vue 文件中引入 d3 import * as d3 from 'd3' 例如一个基础的 d3.vue 文件内容，包含基本的<template><script><style> <template> <div> <svg width="960" height="600"></...
深入理解 D3.js 可视化库之力导向图原理与实现
趣谈前端
10-13 2537
大厂技术坚持周更精选好文简介D3.js[1] 是一个基于 web 标准的 JS 可视化库，它借助 SVG、Canvas 和 HTML 进行数据可视化。在数据可视化中，我们很多时候会使用图来表达数据中所蕴含的信息，图方便让我们清晰的理清各个节点之间的联系，快速提取有用信息。而图布局算法可以使散乱的信息 (信息多以点线的关系承载) 通过一种清晰的方式呈现出来，符合相应的美学标准。不同的图布局[...
详解如何在react中搭建d3力导向图
11-28
D3js力导向图搭建 d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。 实现效果：连线有箭头，点击节点能改变该节点颜色和所...
d3力导向图增加节点_详解如何在react中搭建d3力导向图
weixin_39525007的博客
01-17 459
D3js力导向图搭建d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。版本：4.X安装和导入npm安装：npm install d3前端导入：import * as d3 from 'd3';一、完整代码imp...
d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
weixin_36032446的博客
01-26 877
最近用到d3.js中的force力导向图，想实现效果如下，所有城市节点都在可视范围内，如果超出有滚动条也可以。遇到的问题是，当节点一多，有的节点就会跑到外面去，这边是通过加大charge相互作用力，从原本的-300改为-3000，也是会跑到svg边框外。求教下节点怎么限制在svg边框内？实例代码如下：力导向图var nodes = [ { name: "桂林" }, { name: "广州"...
使用d3.js开发力导向图
dhp1994的博客
10-30 510
主图的拖拽与缩放 在调用上面的缩放的时候会调用zoom 的on zoom 方法，并将缩放以及拖拽的距离传给 缩略图，因为缩放会造成 主图的 translate 发生变化 与手动拖拽造成的translate 会有差 所以 要扣除缩放造成的偏移。所有箭头状态的属性，因为箭头和线不是"一体"的，所以当hover 的时候，圆点(dot) 的大小会发生变化，箭头的refX,refY,也会发生变化，甚至 箭头的大小变化 refX 和refY也得改变。在之前的tick 中去改变 path 的d属性 以及 点的 位置。
d3.js多重力导向图多条关系线
04-29
d3.js实现关系图，多条关系连线，关系说明居中。根据json参数自动生成关系图谱。
d3-network-graph:使用D3力有向图来形象化美国参议院议员之间的关系
05-17
使用D3力有向图来形象化美国参议院议员之间的关系 第一步->使用FORMATTER准备供D3使用的CSV数据 第二步->使用回调（d3.csv的第三个参数），该回调从格式化程序（“节点”）接收数据，并首先根据参议院所在的委员会在不同成员之间创建链接（基于源和目标值）在成员的名字上） 有1021个链接！！！ 第三步->显示以D3为圆和以链接为线的节点 第四步->使链接可拖动（使用startDrag，drag，endDrag函数） 第五步->添加工具提示
python力导向图图_d3 力导向图 force graph
weixin_42330839的博客
01-13 804
背景：项目 vue.js + d3 v4力导向图可以直观看出各个元素之间的相互作用力数据：{nodes:[{id:xxx, group: xx},{},...] // nodes 是每个节点 group 是聚类后的分组 为了让每个 circle 显示不同分组的颜色links:[{target:xxx, source:xxx, value:xx },...] // links 为连线 val...
D3系列第三弹——绘制力导向图
lucky_sdy的博客
09-08 1624
温故而知新
可视化 |【d3】力导向关系图
最新发布
知识库搭建ing
01-28 1729
基于d3.js的力导向关系图实现：包括关系图呈现、悬浮框显示、双击高亮。
D3 v4.x入门（1-5）—— 力导向图
我不是水哥
08-03 5034
  本章主要分享可以拖拽的力导向图代码。   力导向图（图左上角）一般可以用于关系展现。本文参考的是乡村爱情中的部分人物关系图。   目前研究成果   （希望给大家在探索D3 V4.x版本的API的道路省点时间，有时候是真的想给那个作者寄刀片）  其他图的代码会在后面的文章中展示。  差不多已经画了十来个图，总结一下D3的作用。  要总结D3的作用，就要先从绘制一张图的流程说起。D...
D3 二维图表的绘制系列（二十四）力导向图
zjw_python的博客
02-20 2479
上一篇： 旭日图 https://blog.csdn.net/zjw_python/article/details/98613674 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article/details/98182540 本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/...
D3力导向地图制作
windfly
06-27 1330
制作一个中国地图的力导向地图，支持鼠标拖拽，省份作为节点，连线用三角剖分生成。访问地址：http://106.14.147.72/Graphtest/forcemap.html效果图： 定义一个力导向布局、投影和地理路径生成器 创建一个力导向布局，一个墨卡托投影和一个地理路径生成器 var width = 1600; var height = 1000; var
D3力导向图
顺其自然~专栏
04-18 2616
一、背景 力导向图非常适合于渲染关系型信息图。 二、什么是力导向图(Force-directed)？ 我们可以把整张 Network 想象成一个物理仿真系统(Simulation)。系统中的每个节点(Node)都是一个带有能量的粒子，粒子与粒子之间存在斥力（如模拟库伦斥力），而被边(Link)所连结的粒子受到牵引力（如模拟胡克弹力）。系统中的粒子在斥力和引力的不断作用下，从随机无序的布局(L...
写一个d3力导向图的代码
05-19
以下是一个简单的d3力导向图的代码示例，包含了节点、边和节点拖动等功能： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>力导向图</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg width="600" height="600"></svg> <script> // 创建节点和边的数据 var nodes = [{id: 'A'}, {id: 'B'}, {id: 'C'}, {id: 'D'}, {id: 'E'}]; var links = [{source: 'A', target: 'B'}, {source: 'B', target: 'C'}, {source: 'C', target: 'D'}, {source: 'D', target: 'E'}, {source: 'E', target: 'A'}]; // 创建力导向图模拟器 var simulation = d3.forceSimulation(nodes) .force('link', d3.forceLink(links).id(function(d) { return d.id; })) .force('charge', d3.forceManyBody()) .force('center', d3.forceCenter(300, 300)) .on('tick', ticked); // 创建节点和边的SVG元素 var svg = d3.select('svg'); var link = svg.selectAll('line') .data(links) .enter().append('line') .attr('stroke', '#999') .attr('stroke-width', '1'); var node = svg.selectAll('circle') .data(nodes) .enter().append('circle') .attr('r', 10) .attr('fill', '#ccc') .call(d3.drag() .on('start', dragstarted) .on('drag', dragged) .on('end', dragended)); // 节点拖动相关的函数 function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } // 每个时间段更新节点和边的位置 function ticked() { link.attr('x1', function(d) { return d.source.x; }) .attr('y1', function(d) { return d.source.y; }) .attr('x2', function(d) { return d.target.x; }) .attr('y2', function(d) { return d.target.y; }); node.attr('cx', function(d) { return d.x; }) .attr('cy', function(d) { return d.y; }); } </script> </body> </html> ``` 在这个示例中，我们首先创建了节点和边的数据，并使用 `d3.forceSimulation()` 函数创建了力导向图模拟器。然后，我们创建了节点和边的SVG元素，并使用 `d3.drag()` 函数为节点添加了拖动事件。最后，在模拟器的每个时间段里，我们更新了节点和边的位置。如果你需要更详细的解释，请参考d3官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值