SVG标签里的内容和一些d3.js操作

前言
一、svg
- g
- foreignobject
- line
- rect
- circle
- path
- text
- 一些标签上的常见属性
二、d3.js [v5中文文档](https://www.d3js.org.cn/)
- 1. d3-selection
- 2. d3-zoom
- 2. d3-force
- 2. d3-hierarchy
总结

前言

迫于工作需要，使用到了d3来绘制基于svg的思维导图和力导向图
所以对svg还算比较熟悉了，在此做个纪念。
真文档还是去看菜鸟吧

一、svg

这个圈就是一个常见的，很方便的loading图（由于文档过滤掉了animateTransform 标签原因，没动效，实际在浏览器中是可以无限旋转的）
拿来即用的小工具： loading.io

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(255, 255, 255, 0); display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="32" stroke-width="8" stroke="#1989fa" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform></circle></svg>

svg常用于一些小图标icon或者内容不复杂的图片作为大图。由于svg全是标签代码，内容较少，所以使用起来会比等png类图片加载要舒服

需要注意的是svg对象与普通dom对象有一些不同，比如hasClass无效，所以jquery上的方法需要视情况而定

g

g = group 也就是对标签进行分组，无实际显示，当一个矢量图内的标签多起来，每个标签都有不同的定位或者是需要拿出来做筛选的时候，就需要g标签来包裹，通俗点类比就是 ul=svg>li=g

foreignobject

不兼容IE，类比一下相当于iframe。如果需要在svg内加入一些div这样的html元素，就需要用这个标签包裹起来，内容和普通dom一样

line

给定起点xy轴值x1，y1和终点x2，y2连成直线

rect

给定宽高属性画出矩形，如果需要填充添加fill属性颜色值，否则添加stroke颜色值画出边框

circle

给定半径r画出原型

path

路径画笔，是实现所有不规则图形的通用方案，基础点使用就是画两点直线。重要属性d，M0 0 L0 10 意思就是移动到xy坐标轴为(0,0)的位置再画线到(0,10)
和canvas的moveTo()，lineTo()类似

text

想要在svg内添加文字必须用这个标签包裹，想要换行的话，我的实现方式是按长度分割字符串，添加到text包裹下的tspan标签内，每一行一个tspan标签

一些标签上的常见属性

fill 填充内容为指定颜色
stroke 设定画笔颜色
stroke-width 画笔宽度粗细
xy 相对于当前画布偏移（svg指定宽高的坐标轴）
stroke-opacity 画笔透明度
stroke-dasharray 虚线间隔，得实际微调

二、d3.js v5中文文档

与lodash这样的方法集相同，在d3里面分为不同的插件，每个插件使用到都有不同的方法。这里有局限性，我只用到了部分

1. d3-selection

d3里面方法是链式调用，分割的很细致，最常用的就是 d3-selection
调用方式与jquery一样，返回d3对象

//select选择一个,selectAll选择所有标签，可以与jquery一样选择id或者class
const svgContainer = d3.select("svg") .attr("class", "graf") // 选中svg标签，为其添加一个class值，如果已经有class会被覆盖.style("color", "red")const g = svgContainer.append("g") //像刚才找到的svg内添加一个分组标签g
const rect = g.append("rect") //添加一个矩形.data([{w:100, h:200}]) //为刚才添加的这个矩形绑定数据，数组格式.attr("width",function(d){ //d={w:100,h:200}return d.w; //获取绑定数据，如果是多个选中，按数组顺序拿到data})
const text = g.append("text").text("添加文字")

2. d3-zoom

自带svg画布操控插件，可以进行简单的缩放和拖拽画布

svgContainer.call( //为这个svg绑定事件d3.zoom() //创建一个新的缩放行为.scaleExtent([0.1, 5]) //限制缩放范围.on("zoom", function (d) {// 缩放事件绑定}).on("wheel.zoom", null) // 鼠标滚轮事件绑定.on("dblclick.zoom", null); //双击事件绑定
)

2. d3-force

用于绘制力导向图，给图形定义互斥力，引力大小等。画好圆圈和线条，其他交给插件

var forceSimulation = d3.forceSimulation();// 设置图形的中心位置forceSimulation.nodes([{key: "唯一ID",}]).force("link", d3.forceLink([{key: "唯一ID",source: "连线的起点，node节点的key",target: "终点",}]).distance(150).strength(1)) //防止碰撞混乱// 间距，碰撞强度.force("collision",d3.forceCollide().radius(function (d) {// 单独区分排斥}) //margin边距.strength(0.1) //重力指数).force("charge", d3.forceManyBody().strength(-1000)) //排斥.velocityDecay(0.5) //摩擦力，震动.alpha(0.7) //初始动画速度.on("tick", ticked);// ticked方法最重要，当鼠标触发节点交互时，重新计算所有节点的位置，画出连线的起始

2. d3-hierarchy

用于绘制力树形结构图，这里由于每个节点宽高不定，会对相邻节点有挤压，所以用到了另一个插件 d3-flextree

这是思维导图实现的效果图，实现起来说起简单，其实是有很多坑

var flextree = d3Flextree.hierarchy;
// 三方插件基础配置
var layout = flextree({spacing: nodeHeight / 2 + 10, //左右布局时的间隔高度});
var root = layout.hierarchy(d.data[0], function (d) {// 布局节点位置
});
root.sort() // 按绑定数据规则排序，名称，id之类的要求
root.each(function(d){}) //这后面可以对节点偏移做一些调整

d3.select().data() 首先绑定数据，父子结构
使用基础的 d3-hierarchy 或者插件版d3-hierarchy 给定每个节点的位置布局，比如根节点是（0,0）那么右边第一个节点就需要移动x值，向右为加（100,0）
如果是右侧布局，直接使用。如果是左右布局，需要把data分为两份，分别使用d3-hierarchy生成树桩布局，左侧x轴值为负。如果是上下布局，偏移y值
最后根据绑定的数据绘制节点图形和文本，连线根据当前布局完成后两节点位置计算，绑定点击和拖拽事件

总结

用多了 d3 能理解到 echarts 这种图表的实现

讲一下 SVG... 吧相关推荐

svg基础+微信公众号交互(二)
svg基础+公众号交互(二) 欢迎点击: 个人官网博客. 话接上回- 上节我们讲了svg基础及简单的动画demo及案例,这节我们来讲一些难度更高的svg交互. 效果图: 不要激动,这不是css,也不是 ...
SVG 从入门到后悔，怎么不早点学起来（图解版）
点赞 + 关注 + 收藏 = 学会了作为一只前端,只懂 Vue.React 感觉已经和大家拉不开距离了. 可视化.机器学习等领域 JS 都有涉及到,而可视化方面已经被很多领域用到,比如大屏项目. 可 ...
Svg颜色渐变和阴影
文章目录前言一.svg渐变二.svg阴影总结前言 Svg滤镜包括: feBlend:与图像相结合的滤镜 feColorMatrix:用于彩色滤光片转换 feGaussianBlur:模糊滤镜 ...
Android 关于SVG矢量图支持
原文出处:微信,脉脉不得语的安卓开发技术周报 47期推荐资源矢量化 "清晰"和"体积"的矛盾与麻烦面对android的各种dpi某事,想要所有设备上的图片都 ...
matlab图片矢量化,matlab图形矢量化解决方案
大致思路:matlab中生成矢量格式文件-导入Visio中-编辑-导出合适格式-在其他软件中使用准备工具 Matlab 2014b或更高版本 Visio 2007或更高版本我查看过,Matlab能 ...
React 与可视化
一般会想到 canvas 和 svg ; svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广; 什么是svg, scalable vector graphics 全称可缩放矢 ...
css里外边框与内边框_基本CSS边框
css里外边框与内边框 Every HTML element can be provided with a basic border via CSS, using one of 10 styles: ...
数据可视化知识点汇总
数据可视化 canvas svg 项目矢量图svg Canvas与SVG的主要区别 d3 zrender three Antv Antv--g2 g6 L7 Highcharts Echart 系列 ...
前端优化-网页图片优化
前端在工作中,一定会经常涉及到图片,甚至很多人认为前端就是切图的,还有人说前端是用div+css布局的,如果从事了这项工作,你一定不这么认为,相信大家都知道前端绝对不是用PS切片工具把网页切成小图片这 ...

讲一下 SVG... 吧