d3.js

D3.js中的Chord Diagram详解

ChordDiagram今天来聊一聊ChordDiagram，暂且叫弦图吧。这里我不确定从英文翻译过来是不是叫做弦图，因为在百度百科上搜“弦图”，解释的是我国古代数学家赵爽画的“弦图”，是研究勾股定理的图。而我们这里讨论的ChordDiagram，维基百科上是如下定义的：Achorddiagramisagraphicalmethodofdisplayingtheinter-relationship
wan353694124·2020-06-27 12:57

教你用 D3.js 定制个性化的数据可视化图件（一）

D3.js基于数据驱动，使用基础的HTML、SVG和CSS让数据活起来，自由程度高，是当前最流行和使用
GitChat的博客·2020-06-27 10:30

D3.JS实例，旋转的色彩方块

Talkischeap,showmethecode.http://www.w3school.com.cn/tiy/t.asp?f=html_basic，把下面代码复制到这个网站上观看。做出这个的步骤，1.先加入svg2.选中所有矩形，添加矩形。3.调整矩形的颜色，动作等。TransformTransitionsbody{margin:0;}rect{stroke:#fff;stroke-width
查尔德77·2020-06-27 07:45

如何在网页前端里可视化你的知识图谱

（凭啥知识图谱就只能在Neo4j里自嗨，不能来前端show一下，歧视吗(￢_￢)）找了做前端图表展示的开源库，D3.js和Echarts都能做，我拿Echarts实现了一下功能，先看一下在现在项目里
游离态GLZ不可能是金融技术宅·2020-06-25 12:13

d3.js可视化neo4j图数据库项目

关于”d3.js可视化neo4j图数据库”这个项目（专栏）的重要通知项目效果视频展示：d3.js可视化neo4j图数据库项目效果演示因为CSDN博客更新了，使得编辑器极其的不好用！！！！
数星星等天明·2020-06-25 08:21

基于Spark的机器学习实践 (四) - 数据可视化

人类可以对三维及以下的数据产生直观的感受1.1.2数据可视化的好处◆便于人们发现与理解数据蕴含的信息◆便于人们进行讨论1.2数据可视化的常用方法◆对于web应用,一般使用echarts,hightcharts,d3
公众号:JavaEdge·2020-06-25 07:23

【Python绘图】Python画动态条形图（横向直方图）

搜索了一圈的资料发现是用d3.js做的，而且很麻烦，所以决定先用熟悉的Python实现一下。解决了重重问题终于绘制出了python版的动态条形图。  
阿黎逸阳·2020-06-25 06:42

D3，数据驱动的媒体思维

因此你的思维方式就会转变为怎么去借力和沟通了...NID信息设计d3js.org/一开始知道D3.js这个网页前端Javascript语言类库，还是从一个从前在爱范儿写作的网友的实习经历看到的。
陶醉·2020-06-24 16:32

机器学习可视化

D3.js(http://d3js.org/)是一个JavaScript库，可以制作精致的基于网络的交互可视化。尽管它并不存在于Python中，但它很时髦，并且应用广泛，值得你花时间来了解它。
mandagod·2020-06-24 13:02

D3.js v5.0 弦图

数据结构：[{"name":"flare.analytics.cluster.AgglomerativeCluster","size":3938,"imports":["flare.animate.Transitioner","flare.vis.data.DataList","flare.util.math.IMatrix","flare.analytics.cluster.MergeEdge"
哈利路亚阿弥陀佛么么哒·2020-06-24 12:22

【 D3.js 入门系列 --- 9.3 】 弦图的制作

本人的个人博客为：www.ourd3js.comcsdn博客为：blog.csdn.net/lzhlzz转载请注明出处，谢谢。弦图（Chord），主要用于表示两个节点之间的联系。如下图：两点之间的连线表示，谁和谁具有联系：线的粗细表示权重：上面的介绍源于：http://circos.ca/guide/tables/，我就不详细介绍了，还是很好理解的。那么在D3中怎么用layout转换出弦图所需要的
DecemberCafe·2020-06-24 11:35

推荐一款可以替代 Excel 的可视化报表神器！

借助Echarts、HighCharts、D3.js等开源的可视化插件，嵌入代码，开发成插件包，可视化工程
hualalalalali·2020-06-23 15:40

AndroidStudio初体验

请重新收藏确定查看所有私信查看所有通知暂没有新通知MySQL学习由浅入深昨天【福利】一张大图看懂Android架构02-19CSDN学院周年礼，必须“折”服你01-07【CSDN学院公开课】12月3日（今晚）CSDN博客专家分享“数据可视化与D3
Rain_Gu·2020-06-23 10:30

d3.js 实现svg 缩放 平移 旋转

使用d3.js的时候，可能会需要对生成svg对象进行平移，旋转，缩放等操作可以使用矩阵变换来进行坐标系下的转化，但是矩阵运算相对复杂。d3提供了相应的svg变换接口。
快乐一坨屎·2020-06-23 10:02

ECharts的介绍和使用方法，以及其他常见的数据可视化库介绍

常见的数据可视化库：D3.js目前Web端评价最高的Javascript可视化工具库(入手难)ECharts.js百度出品的一个开源Javascript数据可视化库Highcharts.js国外的前端数据可视化库
codingWeb·2020-06-23 08:38

D3.js 弦图的制作

这是一种用于描述节点之间联系的图表。1.弦图是什么弦图（Chord），主要用于表示两个节点之间的联系。两点之间的连线，表示谁和谁具有联系：线的粗细表示权重：2.数据初始数据为：varcity_name=["北京","上海","广州","深圳","香港"];varpopulation=[[1000,3045,4567,1234,3714],[3214,2000,2060,124,3234],[876
aojiu4000·2020-06-22 14:22

怎么让浏览器兼容你的ES6写法

很多流行的JavaScript开源框架都使用ES6编写，如Vue.js、video.js、d3.js等等；ES6可以大大提高开发效率，同时让语法更加规范化，一定程度上增强了代码安全；更重要的是，ES6
注释科长·2020-06-22 10:19

ES6项目构建

Vue,Element,D3.js框架都是基于ES6标准来编码实现的，但是ES6浏览器（chorme,IE，IE6,7，8只支持ES3）是不支持直接运行的，所以要使用ES6标准来进行前端开发必须先构建支持
Sprities·2020-06-22 10:41

d3.js——弦图的绘制

首先我们要明白弦图所要表达的意思是什么？比如我们有以下一组关于地区人口的数据：varcity_name=["北京","上海","广州","深圳","香港"];varpopulation=[[1000,3015,4567,1234,3714],[3214,2000,2060,124,3234],[8761,6545,3000,8045,647],[3211,1067,3214,4000,1006],
AryaoO·2020-06-22 05:51

D3.js人物关系图

本文转载于http://blog.csdn.net/lzhlzz/article/details/40450379力学图（力导向图）与生活中常见的人物关系图结合，是比较有趣的。本文将以此为凭，阐述在力学图中如何插入外部图片和文字。在【第9.2章】中制作了一个最简单的力学图。其后有很多朋友有疑问，主要的问题包括：如何在小球旁插入文字如何将小球换为别的图形如何插入图片如何限制小球运动的边界本文将对以上
Richard_More·2020-06-22 04:42

《Excel 数据之美--科学图表与商业图表的绘制》

作者介绍  张杰，纺织专业的程序猿；热爱数据可视化的数字图像科研狗；理工科背景的文艺逗逼青年；学术研究方向为颜色测量与分析，喜欢研究和对比R、Python、Tableau、D3.js、Matlab、Origin
EasyCharts_Peter·2020-06-22 03:09

mermaid 使用 （javascript 流程图 甘特图 序列图）

mermaid使用的是d3.js绘制的SVG图形mermaid配置官方文档没有看到API，不过可以参考配置文件GitHub项目的源码./src/mermaidAPI.js。初始化方法。
Cribug8080·2020-06-21 18:21

用 Plotly 画出中国疫情地图（附源码）

首先对Plotly做一个简单的介绍，Plotly是一款基于D3.js框架的Python库，其功能相当强大，主要用于做交互式的数据可视化（
Python中文社区·2020-06-20 21:13

d3.js selection.data([values[, key]]) 源码解析

前言最近在学习d3.js,刚开始到选择器这一节，有一个selection.data方法，发现这个方法第二个参数可传可不传，第二个参数是函数，但文档里面并没有第二个参数使用方式的讲解，很难找到列子，所以就干脆撸源码了
强子·2020-06-05 04:12

可视化D3.js库(7)-坐标轴的使用

D3.js库-7-添加坐标轴坐标轴是可视化图表中经常出现的一种图形，由一些刻度和线列段组成。D3中是没有现成的坐标轴，SVG中因而没有现成的图形元素，需要通过D3提供的其他组件来手动添加。
皮皮大·2020-05-20 00:46

可视化D3.js库(5)-做一个简单的图形

D3.js库-5-做一个简单的图形本文中介绍利用一组简单的数据制作一个条形图，先看效果：image画布在HTML中使用的画布有两种：SVG和Canvas，在D3中使用的是SVG。
皮皮大·2020-05-16 20:09

可视化库D3.js(1)-入门篇

先看看官网上对D3.js库的定义：D3.jsisaJavaScriptlibraryformanipulatingdocumentsbasedondata.D3helpsyoubringdatatolifeusin
皮皮大·2020-05-15 11:54

可视化库D3.js（1）-入门篇

从今天开始可视化库D3.js\color{red}{D3.js}D3.js的第一章-入门篇咯什么是D3.jsD3指的是Data-DrivenDocuments，js即Javascript，是后缀名。
尤尔小屋的猫·2020-05-04 10:00

D3.js选择器

一、选择目标元素d3.select(selector)selector是符合W3C选择器规定的字符串，即在css文档中选择元素的方式。//匹配id为idname的第一个元素d3.select('#idname')//匹配类名为.classname的第一个元素d3.select(".classname")//匹配单个元素d3.select()//匹配所有元素d3.selectAll()二、对匹配元素
JunChow520·2020-04-13 10:55

01|如何用D3.js建一个简单的折线图

Step1新建一个文件夹linechart，里面新建一个HTML页面命名linechart；一个css文件夹，里面建一个样式表style.css;一个js文件夹，里面健一个js文件index.js；所有文件名可以根据自己习惯更改。Step2在html页面head标签引入外部样式表。Step3我在链接样式表的时候，觉得找文件路径很费劲，也不知道对不对。找到一个很好的检验方式，在body标签中加上这段
Rocketlu·2020-04-13 05:04

D3.js 世界地图（一）投影方式

十二种地图投影方式1、阿伯斯投影：阿伯斯投影是被设计用4个阿伯斯投影把美国的阿拉斯加州和夏威夷州显示到本图旁边的复合投影，尽管用了等值线图，它把阿拉斯加州缩放了0.35倍，夏威夷州虽然还是一样的比例，但偏移了48度（没查过距离资料，不过夏威夷确实是向东移动了）。阿伯斯投影不支持旋转和设定中心。#d3.geo.albersUsa()2、等面积方位投影等面积方位投影也适合等值线图，这个投影的极坐标方向
简聆壹·2020-04-12 13:35

[译] D3.js 嵌套选择集 (Nested Selection)

[译]D3.js嵌套选择集(NestedSelection)译者注:原文:MikeBostock(D3.js作者)--NestedSelections译者:ssthouse本文讲解的是关于D3.js中d3
ssthouse·2020-04-06 14:22

推酷《编程狂人》第一三七期

前端开发实例教学：使用D3.js实现数据可视化构建一个类jq的函数库入门Webpack，看这篇就够了如何让你的网页打开速度降低到1s内没那么难，谈CSS的设计模式九个Console命令，让js调试更简单使用
推酷·2020-04-06 07:27

[译]D3.js 之 d3-selection 原理

[译]D3.js之d3-selection原理译者注原文:来自D3.js作者MikeBostock的HowSelectionsWorks译者:ssthouse译文在前一篇文章中,我介绍了关于D3selection
ssthouse·2020-04-03 08:35

可视化工具D3.js教程 入门 （第十四章）—— 中国地图

首先我们需要的是中国地图的json数据：请戳这里接下来咱们直接上代码：代码：中国地图//获取svgvarsvg=d3.select('svg');varwidth=svg.attr('width');varheight=svg.attr('height');//创建区域分组varg=svg.append('g').attr('transform','translate(0,0)');//创建一个地
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十三章）—— 树状图

首先我们还是说下这章要用到的知识点，我在这里只是简单的罗列一下，如需详细了解，请戳这里查看中文官方文档d3.hierarchy-从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性.node.sum-评估和汇总定量值.d3.tree-创建一个新的整齐(同深度节点对齐)的树布局.tree-将指定的层次数据布局为整齐的树布局.tree.size-设置布局尺寸.tree.separation-设
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十二章）—— 力导向图

力导向图的概念这里就不细说了，力导向图适合绘制关系型的信息；下面先来说几个关于力导向图的知识点：1、d3.forceSimulation([nodes])创建一个新的力导向图；2、simulation.force(name[,force])如果指定了force则表示添加指定name的force（力学模型）并返回仿真，如下：varsimulation=d3.forceSimulation(nodes
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十一章）—— 饼图

首先我们先梳理下绘制饼图之前需要掌握的新知识：1、d3.arc(arguments..)生成器用来在饼图或圆环图中生成圆形或扇形或环形；arguments是任意的;它们只是简单地传递到arc生成器的访问器函数的对象。例如，根据默认的设置，传入的对象应该包含以下半径和角度信息:arc({innerRadius:0,outerRadius:100,startAngle:0,endAngle:Math.
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第十章）—— 交互式操作

这里所说的交互式操作，就是说的图表的事件监听。on('eventName',funvtion(){...})第一个参数是要监听的事件名称第二个参数是要执行的函数跟jquery类似。下面咱们在上一张的柱状图基础上，给咱们的柱状图增加鼠标移入与移出事件，改变其颜色代码：Titlevardata=[90,75,12,36,54,88,24,66];varmargin=30;//svg上下左右边距vars
&执念·2020-04-02 16:00

可视化工具D3.js教程 入门 （第九章）—— 让图表动起来

在为图标增加动画之前，应该了解几个新的api如下d3.transition()开启一个动画过渡。transition.duration()指定每个元素的持续时间（以毫秒为单位）。transition.delay()指定每个元素的延迟时间（以毫秒为单位)更详细的api讲解请戳这里！代码:Titlevardata=[90,75,12,36,54,88,24,66];varmargin=30;//svg
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第八章）—— 一个简单柱状图

直接上代码：Titlevardata=[90,75,12,36,54,88,24,66];varmargin=30;//上下左右边距varsvg=d3.select('svg');varwidth=svg.attr('width');varheight=svg.attr('height');//创建一个矩形分组varg=svg.append('g').attr('transform','trans
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第七章）—— 坐标轴

直接接着上一章的图表，继续加上一个x坐标轴scaleLinearvardata=[7.3,5.3,3.3,2.3,1.3];//定义比例尺varscaleLinear=d3.scaleLinear().domain([0,d3.max(data)]).range([0,800]);varg=d3.select('svg').append('g').attr('transform','transla
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第六章）—— 比例尺的使用

1、比例尺是什么？比例尺能将“一个区间”的数据映射到“另一个区间”。例如[0,1]对应到[0,300]，当输入0.5时，输出150。或者将[0,1,2]对应到["red","green","blue"]，当输入2时，输出blue。上述示例中的[0,1]和[0,1,2]称为定义域，[0,300]和["red","green","blue"]称为值域。定义域和值域之间的映射方法称为对应法则。要理解比例
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第五章）—— 一个简单的图表

从这里开始我们就将开始画一个简单的图表了在此之前，最好掌握以下svg的基本知识。一个间的的例子如下：Titlevardata=[730,530,330,230,130];varg=d3.select('svg')//获取svg.append('g')//创建分组.attr('transform','translate(30,30)');//图表距离视口的左、上距离varrectHeight=30;
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第四章）—— 选择 插入 删除

1、选择元素第一章有说过d3.select()和d3.selectAll();这两个方法的选择器与jQuery的元素、属性、css选择器使用方法基本一样，下面我们就说下他们的区别；d3.selectAll()；选择的是所有匹配到的元素；d3.select(‘.calss’)、d3.select(‘#id’)、d3.select(‘div’)、d3.select(‘[name="zh"]’)等都是选
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第三章）—— 理解 Update Enter Exit

咱们来说说UpdateEnterExit他们的使用由于上一篇说到的data()方法给元素绑定数据是需要元素与数据一一对应的关系，那么如果元素个数与数据个数对不上了怎么办？有可能存在元素多了或者数据多了的情况，对于这种情况就需要用到咱们要说的这三个方法了,或者说数据绑定的三个步骤，Update更新元素节点（绑定数据时默认进行的）Enter增加元素节点（这个的后面会用的很多）Exit删除元素节点举例如
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定

D3.js就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 （第一章）—— hello world

1、利用D3.js在网页上显示一些文字内容；代码hellovarh3=d3.select("body").selectAll("h3");h3.text('日照香炉生紫烟')运行效果：假如你第一次接触D3
&执念·2020-04-02 15:00

可视化工具D3.js教程 入门 (V5版)

可视化工具D3.js，就不赘述他的简介与下载了，官网上看，直接上教程：可视化工具D3.js教程入门（第一章）——helloworld可视化工具D3.js教程入门（第二章）——选择元素与数据绑定可视化工具
&执念·2020-04-02 15:00

d3.js加载本地地图

在处理的过程中，首先要将本地的shapefile格式的数据转换为json格式，然后通过引用该脚本将点展示出来。看似简单，但是在处理过程中还是发现了很多问题，由于转换出来的json文件是投影坐标，导致地图变成了“畸形”，对比网上示例代码的json文件，发现其中点数据的坐标都是以经纬度形式出现，经过查阅发现coordinates（经纬度），另外geojson与json其实没有太大的区别（GeoJSON
紫虚上人·2020-04-01 17:20
上一页 5 6 7 8 9 10 11 12 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他