文章目录

Data-Driven Documents理解
- selections
- - selections操作
直接上码：
- 导入库，这里使用d3.v3,d3.v5可能有差异：
- 建立画布，并把画布svg添加到html的body或者div里
- 建立力矩图
- 读取json数据
- 把数据放进force里，force就可以直接使用自己的数据了
- 依次把边添加到svg
- 依次把节点添加到svg
- 定义事件 mouseover， mouseout
- 定义事件 tick
- 拖拽固定
- zoom
完整code:

Data-Driven Documents理解

首先它是js，js本质就是dom（Document Object Model，简称DOM）的增删查改，dom的本质就是一棵树，d3本质也是对一棵树进行操作。

selections

对dom操作，最开始就是定位，也就是选择哪一块，哪一颗子树

d3.selectAll("p").style("color", "blue");

selections操作

// Update…
var p = d3.select("body").selectAll("p").data([4, 8, 15, 16, 23, 42]).text(function(d) { return d; });// Enter…
p.enter().append("p").text(function(d) { return d; });// Exit…
p.exit().remove();

直接上码：

导入库，这里使用d3.v3,d3.v5可能有差异：

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

建立画布，并把画布svg添加到html的body或者div里

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

建立力矩图

    var force = d3.layout.force().gravity(.05).charge(-240).linkDistance(160).size([width, height]);

读取json数据

    d3.json("graph.json", function(error, json) {if (error) throw error;}

把数据放进force里，force就可以直接使用自己的数据了

        force.nodes(json.nodes).links(json.links).start();

依次把边添加到svg

selectAll(".link")相当于占位符，添加"line"标签，设置该line标签的属性

        var link = svg.selectAll(".link").data(json.links).enter().append("line").attr("class", "link").attr("stroke-width", function(d) { return Math.sqrt(d.value); });

依次把节点添加到svg

节点包括node和text两部分，使用group包起来，先添加g标签再添加circle和text标签

        var node = svg.selectAll(".node").data(json.nodes).enter().append('g').attr("class", "node").style("fill","red").on("mouseover", mouseover).on("mouseout", mouseout).call(force.drag);node.append("circle").attr("r", 8);node.append("text").attr("dy", ".35em").text(function(d) { return d.name; });

定义事件 mouseover， mouseout

mouseover， mouseout为基本事件
transition变换过渡效果

        function mouseover() {d3.select(this).select("circle").transition().duration(750).attr("r", 80);}function mouseout() {d3.select(this).select("circle").transition().duration(750).attr("r", 8);}

定义事件 tick

实际就是补充div的属性

force.on("tick", tick);function tick() {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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });};

拖拽固定

相当于重写了drag函数

        var node_drag = d3.behavior.drag().on("dragstart", dragstart).on("drag", dragmove).on("dragend", dragend);var node = svg.selectAll(".node").data(json.nodes).enter().append('g').attr("class", "node").style("fill","red").on("mouseover", mouseover).on("mouseout", mouseout)//.call(force.drag);.call(node_drag);function dragstart(d, i) {force.stop() // stops the force auto positioning before you start dragging}function dragmove(d, i) {d.px += d3.event.dx;d.py += d3.event.dy;d.x += d3.event.dx;d.y += d3.event.dy;tick(); // this is the key to make it work together with updating both px,py,x,y on d !}function dragend(d, i) {d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stufftick();force.resume();}

zoom

        var zoom = d3.behavior.zoom().scaleExtent([1, 10]).on("zoom", zoomed);var svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.right + ")").call(zoom);//specify what to do when zoom event listener is triggeredfunction zoomed() {g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");}

完整code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>.link {stroke: #777;stroke-opacity: 0.5;}</style>
<body><script src="http://d3js.org/d3.v3.min.js"></script>
<script>d3.json("graph.json", function(error, json) {if (error) throw error;var margin = {top: -5, right: -5, bottom: -5, left: -5},width = 960 - margin.left - margin.right,height = 960 - margin.top - margin.bottom;var zoom = d3.behavior.zoom().scaleExtent([1, 10]).on("zoom", zoomed);var svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.right + ")").call(zoom);var force = d3.layout.force().gravity(.05).charge(-240).linkDistance(160).size([width, height]);force.nodes(json.nodes).links(json.links).start();var g = svg.append("g").attr("class", "everything");var link = g.append("g").attr("class", "links").selectAll(".link").data(json.links).enter().append("line").attr("class", "link").attr("stroke-width", function(d) { return Math.sqrt(d.value); });// var node_drag = d3.behavior.drag()//     .on("dragstart", dragstart)//     .on("drag", dragmove)//     .on("dragend", dragend);var node = g.append("g").attr("class", "nodes").selectAll(".node").data(json.nodes).enter().append('g').attr("class", "node").style("fill","red").on("mouseover", mouseover).on("mouseout", mouseout).call(force.drag);//.call(node_drag);node.append("circle").attr("r", 8);node.append("text").attr("dy", ".35em").text(function(d) { return d.name; });force.on("tick", tick);function tick() {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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });};function mouseover() {d3.select(this).select("circle").transition().duration(750).attr("r", 80);}function mouseout() {d3.select(this).select("circle").transition().duration(750).attr("r", 8);}// function dragstart(d, i) {//     force.stop() // stops the force auto positioning before you start dragging// }//// function dragmove(d, i) {//     d.px += d3.event.dx;//     d.py += d3.event.dy;//     d.x += d3.event.dx;//     d.y += d3.event.dy;//     tick(); // this is the key to make it work together with updating both px,py,x,y on d !// }//// function dragend(d, i) {//     d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff//     tick();//     force.resume();// }//specify what to do when zoom event listener is triggeredfunction zoomed() {g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");}});</script>

D3js（三）：force实例相关推荐

[转载]MaxtoCode对.Net程序加密的原理及解密探讨三（实例解密）
标题: [原创]MaxtoCode对.Net程序加密的原理及解密探讨三(实例解密) 作者: rick 时间: 2006-09-29,23:16:28 链接: http://bbs.pediy. ...
python的用途实例-三个实例带你了解生成器的作用
三个实例带你了解生成器的作用 python的生成器究竟有什么作用? 本文通过3个具体的例子向你阐述生成器的作用, 1. 使用生成器非常便利的结束两层for循环, 2. 一个for循环遍历多个列表, 3 ...
verilog奇数分频，三分频实例
verilog奇数分频,三分频实例目的:输入一个时钟信号,输出占空比为50%的三分频. 首先得到一个占空比为1/3的分频时钟,然后将输入信号取反,得到一个移相180度的占空比为1/3的分频时钟,将两 ...
用matlab2018解方程,【2018年整理】MATLAB解方程的三个实例
<[2018年整理]MATLAB解方程的三个实例>由会员分享,可在线阅读,更多相关<[2018年整理]MATLAB解方程的三个实例(4页珍藏版)>请在金锄头文库上搜索. 1.M ...
OpenGL超级宝典（第7版）笔记13 前三章实例下个五子棋（上）
OpenGL超级宝典(第7版)笔记13 前三章实例下个五子棋 (上) 文章目录 OpenGL超级宝典(第7版)笔记13 前三章实例下个五子棋 (上) 前言 1 初构建 2 构建数据结构 3 绘制 ...
服务器系统2022安装wsl2,微软win10子系统wsl2安装教程（附三个实例应用场景）
wsl2与今年6月份微软buld的大会上发布消息,7月15日左右开始正式加入windows inside版本,熟悉wls(win10子系统)一代的都知道,这东西把linux系统的操作直接带入到win1 ...
ROS学习|SMACH状态机三(使用实例)
系列文章目录 ROS基础 ROS单线程与多线程 navigation基本导航 navigation基本导航 SMACH状态机一(安装与初探) SMACH状态机三(使用实例) 目录系列文章目录写在前 ...
WF4.0 基础篇 (三) 流程实例WorkflowApplication与设计WF程序的基本原则
通过本节,可以初步了解WF程序的特性,为以后的WF类应用开发提供一个初步的感性认识目录 1 流程实例WorkflowApplication与设计WF程序的基本原则 1 1.1 流程 ...
php 多进程设置,php多进程操作的三个实例
1,php多进程并行操作实例复制代码代码示例: //多进程并行操作 /** * 入口函数 * 将此文件保存为 ProcessOpera.php * 在terminal中运行 /usr/local/ ...

D3js（三）：force实例