svg
文章平均质量分 85
冷色系微风爱丶
接触的越多,不懂的越多,学海无涯。
文章若有侵权,联系立马删除。
展开
-
d3.js 生成 svg tree 树形结构图
本文实例 demohttp://www.jq22.com/jquery-info21370d3中文版 https://d3js.org.cn官方API https://github.com/d3/d3/blob/master/API.md官方APIv3https://github.com/d3/d3-3.x-api-reference/blob/master/API-R...原创 2019-03-12 14:13:29 · 9776 阅读 · 7 评论 -
vue dagre-d3 基于d3.js v3版本以上
npm i d3@3.xnpm i dagre-d3@0.3.0弹窗用的不是tispy 自己写的。不支持拖拽 没有写。<template> <div class="Newdagre"> <svg width="960" height="1000"/> <div class="chartTooltip"&g...转载 2019-05-15 17:35:44 · 2791 阅读 · 0 评论 -
蜂巢 canvas 效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <ME...转载 2019-05-16 10:22:14 · 569 阅读 · 0 评论 -
樱花飘落 canvas 效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <ME...转载 2019-05-16 10:22:42 · 1706 阅读 · 1 评论 -
抽象画布可视化 canvas 效果
<!doctype html><html><head><meta charset="utf-8"><title>抽象画布可视化</title><style>body { background: #000; overflow: hidden;}canvas { display: bl...转载 2019-05-16 10:23:33 · 248 阅读 · 0 评论 -
d3.js zoom 事件
d3.js v3 英文文档https://github.com/d3/d3-3.x-api-reference/blob/master/Zoom-Behavior.mdd3.js v4 中文文档https://d3js.org.cn/document/d3-zoom/#zoom-transformsd3.behavior.zoom() 调用d3.js 的zoom 事件v...转载 2019-05-29 18:51:40 · 4746 阅读 · 4 评论 -
svg getTransformToElement 兼容谷歌
我用的是vue 放在了main.js 中 生效=========== [ http://jointjs.com/blog/get-transform-to-element-polyfill.html ] ====================公告:getTransformToElement()polyfill 2015年11月12日不幸的是,新版Chrome(48)删除了...转载 2019-06-04 11:21:46 · 452 阅读 · 0 评论 -
树状图点击节点居中 d3.js@3.x
v4以上的api 没搞懂var width = document.getElementById("tree").offsetWidth;var height = document.getElementById("tree").offsetHeight;var zoom = d3.behavior.zoom().center([width, height]).scaleExte...原创 2019-06-21 17:36:35 · 992 阅读 · 0 评论 -
svg 树状图 圆大小
确定你的数据中有大小数字,请求数据中的number 不同,圆大小不同。nodeEnter.append('circle') .attr('r', (d) => { return Math.min(30, Math.max(1 * d.number, 10)) }) .style('fill', '#3553F4')...转载 2019-06-24 15:15:38 · 447 阅读 · 0 评论 -
svg line stroke-width 相同但是不一样粗 仅做记录
转载链接https://segmentfault.com/q/1010000004242600转载链接https://segmentfault.com/q/1010000012453028因为文字默认有'fill:black'的属性,而stroke是沿着文字边框向内和向外扩展stroke-width数值的一半。所以最后一个text标签的fill挡住了前面text标签的一半st...转载 2019-07-15 17:42:44 · 3080 阅读 · 0 评论 -
tipsy 文件 弹窗 基于dagre-d3
未做研究,仅保留文件http://bl.ocks.org/ilyabo/1373263留一个路径可供参考tipsy.js// tipsy, facebook style tooltips for jquery// version 1.0.0a// (c) 2008-2010 jason frame [jason@onehackoranother.com]// relea...转载 2019-05-15 17:12:54 · 837 阅读 · 0 评论 -
dagre-d3 基于d3.js v3版本以上
基于d3 v3 和 v4 的变化https://github.com/dagrejs/dagre-d3/commit/ebbb84f03bd169061f40d7a1df82cb3b51860187弹窗 tipsy.js tipsy.csshttps://blog.csdn.net/czy279470138/article/details/90240610基于d3.v3...转载 2019-05-15 17:10:31 · 1867 阅读 · 0 评论 -
three.js 01-basic-scene.html
<!DOCTYPE html><html><head> <title>Example 02.01 - Basic Scene</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js">...转载 2019-04-12 18:09:13 · 122 阅读 · 0 评论 -
three.js setClearColorHex
three setClearColorHexrenderer.setClearColorHex(0xEEEEEE, 1.0);这个方法过期了,被淘汰掉了,买的下面这本书,建议不要买了, 看下webGL 方面的。版本跟新会淘汰掉一些旧的,d3.js 也是 d3.layout 再 3.x 里有,4.x 就没有了,现在更新到5.9 入手一本4.x的书,不知道会不会过期。<...转载 2019-04-11 19:22:44 · 3274 阅读 · 0 评论 -
雷达图 svg
https://www.w3schools.com/code/tryit.asp?filename=G2WP62MVNH5B转载 2019-04-10 11:08:58 · 911 阅读 · 0 评论 -
d3 力导向图
代码是摘抄的,找不找网址了,没有研究过力导向图 仅作参考<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>1</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/j...转载 2019-04-03 16:35:35 · 1341 阅读 · 0 评论 -
vue d3 svg tree树状图
用的是d3.v3 版本展示没有问题,细节有问题。采用的是自己的json,调接口的没有总结,太麻烦了。下面地址是原声的,支持提示框可复制文字,并且节点之间不会重叠,tree.size 改成 tree.nodeSize 即可https://blog.csdn.net/czy279470138/article/details/88419831<style> ...转载 2019-03-22 14:09:33 · 4186 阅读 · 0 评论 -
D3js-API介绍
转自:http://www.cnblogs.com/cxchanpin/p/7114868.html官方的英文 看的比较吃力。https://github.com/d3/d3/blob/master/API.md#paths-d3-pathD3js-API介绍【中】JavaScript可视化图表库D3.js API中文參考,d3.jsapiD3 库所提供的全部 API 都在 ...转载 2019-03-22 10:46:28 · 1000 阅读 · 0 评论 -
npm i d3 layout
用 npm安装的d3 js不包含 layout方法?import * as d3 from 'd3'使用3.x版本npm install d3@3.x4.x版本中API改了,如果要用,请看CHANGELOGhttps://github.com/d3/d3/blob......转载 2019-03-15 12:41:12 · 1030 阅读 · 0 评论 -
生成验证码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <me...转载 2019-02-26 18:30:08 · 115 阅读 · 0 评论 -
webGL
webGL 新手的总结参考webGLhttp://www.hewebgl.com/article/articledir/1参考three.js 基本控件https://www.cnblogs.com/catherinezyr/p/7047465.htmlthree.js 材质MeshBasicMaterialhttps://blog.csdn.net/zhulx_sz/a...转载 2018-12-04 15:46:55 · 161 阅读 · 0 评论 -
dagre-d3 基于d3.js v4版本以上
dagre-d3 github 上没有文档介绍 看dagre.js的吧 基于d3.js v4以上dagre.js githubhttps://github.com/dagrejs/dagre/wikidagre-d3 githubhttps://github.com/dagrejs/dagre-d3/wiki基于d3 v3 和 v4 的变化https://github...原创 2019-05-15 17:06:59 · 3308 阅读 · 1 评论 -
svg 链接
svg 数据图形链接推荐:图说数据 有高校分布图http://www.graphvis.cn/NetworkGraph 力导向图http://148.70.238.152/https://github.com/iaboaix/NetworkGraphhttp://jeffreyliang.coding.me/webproject/app/index.html#/...转载 2019-07-15 18:10:51 · 374 阅读 · 0 评论