d3
对d3.js由浅入深的学习
pg_li
这个作者很懒,什么都没留下…
展开
-
d3选择器enter、exit、update
1、enter常用在批量创建元素,当查询的元素不足时,通过enter+append去动态创建跟data数据一致的元素ref.selectAll('circle') .data(path) .enter() .append('circle') .attr('r', 1) // 通过样式控制大小 .attr('class', `dynamic-canvas-circ.原创 2020-12-07 15:59:08 · 774 阅读 · 0 评论 -
svg设置高度后 父级div会比svg高度高4px左右
背景<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div style="background-color: #000"&...原创 2019-06-27 11:28:01 · 2661 阅读 · 3 评论 -
svg动态图
1、使用svg animate标签来处理动画<svg width="120" height="120" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="转载 2018-07-17 10:28:55 · 12416 阅读 · 1 评论 -
SVG 图像入门教程
作者: 阮一峰 www.ruanyifeng.com/blog/2018/08/svg.html一、概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。 SV...转载 2018-08-09 16:13:36 · 837 阅读 · 0 评论 -
d3常用比例尺总结
d3.js是v4版本目录1、scaleTime -创建一个线性的时间比例尺. 2、scaleLinear-创建一个定量的线性比例尺.3、scaleOrdinal - 创建一个无序序数比例尺4、scaleBand - 创建一个有序序数比例尺5、scaleQuantize - 创建一个量化比例尺6、scalePow - 创建一个定量的指数比例尺. 7、scaleS...原创 2018-08-13 18:53:57 · 7611 阅读 · 0 评论 -
基于ng-alain和gojs绘制流程图
1、左树使用ng-alain组件import { Component, OnInit, TemplateRef } from '@angular/core';import { _HttpClient } from '@delon/theme';import { of } from 'rxjs/observable/of';import { delay } from 'rxjs/operato...原创 2018-06-11 17:47:40 · 3290 阅读 · 2 评论 -
vue + d3项目
1、安装好node环境2、安装vue-cli 淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 3、创建项目(名称小写)安装依赖4、路由5、resourse和axios(推荐使用)插件 resourse:vue2.0之后,就不再对vue-resource更新,...原创 2018-04-28 14:28:13 · 8546 阅读 · 2 评论 -
canvas去毛边
1、画线时将坐标取整后加上0.5。原因是canvas在绘制的时候,整数点坐标在屏幕像素的中间点,绘制的时候,线条会俩边都占一半,在视觉上看起来是俩个像素的效果。(写基础方法的时候做下处理)2、设置canvas的宽高后,绘制完图形后再scale缩小。...原创 2018-03-26 21:00:42 · 1970 阅读 · 0 评论 -
Canvas 和 SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。CanvasCanvas ...转载 2018-04-23 10:05:26 · 163 阅读 · 0 评论 -
canvas学习总结
/** * 1、制作动画使用window.requestAnimationFrame方法,体验更好 * requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率 * 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使...原创 2018-04-24 11:18:01 · 473 阅读 · 0 评论 -
html5面试题
1.HTML5 为什么只需要写 <!DOCTYPE HTML>?答案解析:HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们应该的方式来运行)而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?答案解析:行内元素:a ...转载 2018-04-24 21:06:11 · 1136 阅读 · 0 评论 -
svg和d3学习篇
一、SVG学习1. <svg>标签<svg width="300" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--width 和 height 属性可设置此 SVG 文档的宽度和高度。--> <!--version 属性可定义所使原创 2018-04-26 15:36:18 · 3348 阅读 · 0 评论 -
ng-alain+d3.js开发类表格
1、安装使用 1)安装d3 npm install --save d3 2)安装@types/d3 npm install --save @types/d3 3)安装d3-dsv npm install --save @types/d3-dsv2、tip插件无法使用 d3-tip和tooltip均无法使用 解决办法:...原创 2018-05-29 11:01:13 · 813 阅读 · 1 评论 -
ng-alain+D3绘制地图
一、获取中国的地图数据地图json数据下载(域名失效) 世界地图json数据(域名失效) 中国地图json文件 json文件简化 地图json文件二、绘制过程中遇到的问题 1、理解SVG viewport,viewBox,preserveAspectRatio缩放1)viewBox viewBox="x, ...原创 2018-06-27 10:44:30 · 713 阅读 · 0 评论 -
d3绘制折线图,及自适应问题
1、demo <!DOCTYPE html><meta charset="utf-8"><style type="text/css">/* 13. Basic Styling with CSS *//* Style the lines by removing the fill and applying a stroke */.line {...原创 2018-08-17 17:44:56 · 1857 阅读 · 0 评论 -
d3绘制地图(放大显示2 3级行政单位)
1、使用d3绘制地图,希望随着地图的放大缩小显示不同级别的行政单位,默认1级行政单位是各个省和直辖市。实现思路:1)改造地图json文件,给各个行政单位进行区域划分2)绘制地图的时候默认只显示一级行政单位。将2级及以上行政单位默认隐藏(通过class样式)3)地图放大缩小(zoom函数中)时,在相应的倍数中去查找对应的级别样式,把display:none的样式移除。...原创 2018-09-25 19:00:56 · 2256 阅读 · 2 评论