SVG

<svg width="50" height="50"><rect x="0" y="0" width="50" height="50" fill="green" />
</svg><svg width="50" height="50"><circle cx="25" cy="25" r="25" fill="purple" />
</svg><svg width="50" height="50"><ellipse cx="25" cy="25" rx="15" ry="10" fill="red" />
</svg><svg width="50" height="50"><line x1="5" y1="5" x2="40" y2="40" stroke="gray" stroke-width="5"  />
</svg><svg width="50" height="50"><polyline fill="none" stroke="blue" stroke-width="2"points="05,3015,3015,2025,2025,1035,10" />
</svg><svg width="50" height="50"><polygon fill="yellow" stroke="blue" stroke-width="2"points="05,3015,1025,30" />
</svg>

Adding a DOM Element

在body的尾部添加一个

的空标签

d3.select("body").append("p");

Adding an SVG Element

在body的尾部添加一个svg的标签,再添加一个circle标签

d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");var bodySelection = d3.select("body");var svgSelection = bodySelection.append("svg").attr("width", 50).attr("height", 50);var circleSelection = svgSelection.append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");

Binding Data to DOM Elements

在body里添加3个p标签，内容均为hello

var theData = [ 1, 2, 3 ]
var p = d3.select("body").selectAll("p").data(theData).enter().append("p").text("hello ");

Using Data Bound to DOM Elements

在body里添加3个p标签，内容为theData的内容

var theData = [ 1, 2, 3 ]var p = d3.select("body").selectAll("p").data(theData).enter().append("p").text( function (d) { return d; } );

D3js（一）: d3js和DOM相关推荐

【D3js】d3.select(this)获取到的 DOM对象的数据结构
在 D3js中,操作过程中经常会使用 d3.select(this) 命令来获取当前鼠标点击选中的形状元素(诸如矩形 <rect> .圆形 <circle>.椭圆 <el ...
echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！
数据大屏与数据可视化数据可视化是目前对数据展示最常用的方式.数据的可视化设计有助于将复杂的数据,用最易理解的方式展示在用户的面前. 数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性 ...
D3js（三）：force实例
文章目录 Data-Driven Documents理解 selections selections操作直接上码: 导入库,这里使用d3.v3,d3.v5可能有差异: 建立画布,并把画布svg添加到 ...
d3js mysql_D3js技术文档可视化展现
转载请注明http://www.cnblogs.com/juandx/articles/3885220.html D3js技术文档概述 D3 allows you to bind arbitrary ...
D3可视化：（2）Bar Chart with D3js
拖更了好久,最近毕业的手续办的差不多了,应该可以回来了... 系列传送门: D3可视化:(1)初次见面,SVG与D3的魅力 D3可视化:(2)Bar Chart with D3js 更新中... 知识 ...
d3ForceEasy —— 一个封装D3js force力导向图简单使用的轮子
d3ForceEasy(更新时间2022年3月2日) v1.0.4 优化文字居中逻辑新增回到中心功能 v1.0.3 -新增连线文字和优化新增节点逻辑 D3js force力导向图简单使用的工具依 ...
uni-app 中使用 d3js 绘制图形
使用d3js绘制地图的例子有很多,使用的都是geojson的格式本篇文章实现的是,按照svg path路径,通过 d3js 将图形绘制出来先看效果图下面按步骤介绍如何引用 d3,如果想直接使用整 ...
基于D3js以及Neo4j的知识图谱系统开发
因为要做这个知识图谱,对这方面完全是小白 D3js和这个Neo4j是啥咱也不清楚,学呗! 1前置知识 1.1D3.jshttps://www.d3js.org.cn/ 据说,不同版本之间的坑很多(怎么 ...
D3js快速入门——用最新版D3js实现树图
文章目录: 引言 1. D3js 是什么 2. D3js 相对其他数据可视化方案的优势 2.1 SVG 对比 Canvas 2.2 D3.js 对比 Echarts 3. 怎么用 D3.js 开发一个 ...

D3js（一）: d3js和DOM

文章目录

SVG

Adding a DOM Element

Adding an SVG Element

Binding Data to DOM Elements

Using Data Bound to DOM Elements

D3js（一）: d3js和DOM相关推荐

最新文章

热门文章