JavaScript学习d3 的相关内容

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】16、D3布局-矩阵图

d3.layout.treemap() 矩阵图(Treemap)的API说明 treemap.children - 取得或设置孩子访问器。 treemap.links - 计算树节点中的父子链接。 treemap.mode - 改变布局的算法。 treemap.nodes - 计算矩形树布局并返回节点数组。 treemap.padding - 指定父子之间的间距。 treemap.round...

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】18、D3布局-分区图（圆形）

d3.layout.partition() 上节中展示的是基本的方形分区图，这节我们要做一个圆形的分区图，圆形图跟方形图基本相同，只有布局函数的 size 函数和绘制图形的部分稍有区别； 1、数据 var dataset = { "name": "中国", "children": [ { "...

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】17、D3布局-分区图（矩形）

d3.layout.partition() 分区图可以展示为方形或者圆形，从原理上来说它是树状结构的一种可视化展现形式，表示包含与被包含的关系；分区图(Partition)的API说明 partition.children - 取得或设置孩子访问器。 partition.links - 计算树节点中的父子链接。 partition.nodes - 计算分区布局并返回节点数组。 partit...

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】19、D3布局-直方图

d3.layout.histogram() 直方图用于描述概率分布，假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ]，现在把10~20的数值范围分为5段，即：10~12, 12~14, 14~16, 16~18, 18~20那么数组 a 的各数值都落在这几段区域的哪一部分呢？经过计算，可以知道，这5段分别具有的元素个数为：3, 2, 1, 0 , .....

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】21、D3交互事件

前20节中，我们讲了各种静态D3图表的制作，好的图表应该是要与用户进行互动的，这节来讲讲D3的交互事件； d3.event selection选择器事件监听的写法跟平时我们用的jQuery类似，如： selection.on(‘click’,function(d,i){ alert(‘ok’); }) 但请注意，点击事件触发的匿名函数参数不是我们常用的e或event，而是绑定在选择器上的数据d和....

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】20、D3布局-捆图

d3.layout.bundle() 下图是航班查询网站全球航班雷达（FlightRadar24）显示的今日长三角地区的飞机飞行图：图中我们能看到每时每刻有多少飞行在我们头上飞，有北京-杭州、杭州-日本、上海-北京的航班等等，如果你想知道哪个机场最繁忙，那就可以用到捆图来展现了；捆图（Bundle）是D3布局中即简单又复杂的一种布局方式，说简单，它只有2个函数来实现数据转换，说复杂，它的...

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】24、D3几何 - 多边形

d3.geom.polygon polygon函数有3个用途： polygon.area() 用来计算多边形面积； polygon.centroid() 用来计算多边形中心坐标； polygon.clip(subject) 用来处理2个多边形重叠时，返回重叠区域多边形，用来剪切的多边形需要是逆时针方向且是凸多边形；通过一个示例来展示。 1、数据 // dataset0 用来做裁切主...

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】23、D3几何 - 四叉树

d3.geom.quadtree 四叉树也被称为Q树（Q-Tree）。四叉树广泛应用于图像处理、空间数据索引、2D中的快速碰撞检测、存储稀疏数据等，对游戏编程，这会很有用。四叉树（Q-Tree）是一种树形数据结构。四叉树的定义是：它的每个节点下至多可以有四个子节点，通常把一部分二维空间细分为四个象限或区域并把该区域里的相关信息存入到四叉树节点中。四叉树的每一个节点代表一个矩形区域（如上图...

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】22、D3几何 - 泰森多边形

d3.geom.voronoi() 在日常生活中有这样的场景，在一个城市中有很多的便利店，当你走在城市的任意地方，怎么才能找到离你了近的便利店呢？这种场景就适合用泰森多边形来解决。通过一个示例来展示。 1、数据 var dataset = [[18,162], [114,403], [261,98] ]; //假设这是三家便利店 2、数据转换 var width = 500; var...

文章 2017-01-20 来自：开发者社区

【D3.js 学习总结】25、D3几何 - 凸包

d3.geom.hull hull函数用于计算指定坐标点的外围边界，用一个场景来描述，某片草原上有100只羊在不同的位置，我们需要将羊群所在的草场圈起来，那只要将羊群最外围的羊通过一根线连起来就可以实现，同理，hull就是用来计算这个外围边界的方法；通过一个示例来展示。 1、数据，随机生成100只羊的坐标 var width = 500; var height = 500; var ran...

共有20条

< 1 2 >

跳转至： GO

更新时间 2024-11-07 10:00:49

本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。

JavaScript学习相关内容

JavaScript更多学习相关

JavaScript您可能感兴趣

产品推荐

{"optioninfo":{"dynamic":"ture","static":"true"},"simplifiedDisplay":"newEdition","newCard":[{"iconImg":"https://img.alicdn.com/tfs/TB1JWN9qggP7K4jSZFqXXamhVXa-200-200.png","ifIcon":"img","link":"https://img.alicdn.com/tfs/TB1XY8hGYr1gK0jSZFDXXb9yVXa-1740-328.png","title":"Node.js 性能平台","des":"Node.js 性能平台（Node.js Performance Platform）是面向中大型 Node.js 应用提供 性能监控、安全提醒、故障排查、性能优化等服务的整体性解决方案。提供完善的工具链和服务，协助客户主动、快速发现和定位线上问题。","btn1":"申请开通","link1":"https://common-buy.aliyun.com/?spm=5176.179584.935956.btn1.6bd0276eYr3tGs&commodityCode=npp#/open","contentLink":"https://www.aliyun.com/product/nodejs","btn2":"产品文档","link2":"https://help.aliyun.com/product/60298.html?spm=5176.179584.935956.btn2.6bd0276eYr3tGs","infoGroup":[{"infoName":"入门指导","infoContent":{"firstContentName":"产品快速入门","firstContentLink":"https://help.aliyun.com/knowledge_detail/60338.html?spm=5176.179584.935963.2.6bd0276eYr3tGs","lastContentName":"常见问题","lastContentLink":"https://help.aliyun.com/knowledge_detail/60418.html?spm=5176.179584.935963.3.6bd0276eYr3tGs"}},{"infoName":"最佳实践","infoContent":{"firstContentName":"内存泄露案例","firstContentLink":"https://help.aliyun.com/document_detail/64011.html?spm=a2c4g.11174283.6.570.159030b1bBdKke"}},{"infoName":"产品动态","infoContent":{"firstContentName":"产品最新动态","firstContentLink":"https://www.aliyun.com/product/news?spm=5176.179584.1266814.211view.6bd0276eYr3tGs&category=233&product=261"}}],"btn3":""}],"card":[],"search":[],"infoCard":[],"title":{"mainTitle":"mPaaS","subtitle":"源自于支付宝小程序框架，亿级线上业务体量的锤炼，安全性媲美支付宝原生能力。不仅面向自有 App 投放小程序，更可快速构建打包，覆盖支付宝、淘宝、钉钉等应用。","linkUrl":"https://www.aliyun.com/product/mobilepaas/mpaas-miniprogram","btnText":"查看详情"},"visual":{"topbg":"https://img.alicdn.com/tfs/TB1bQuBIYH1gK0jSZFwXXc7aXXa-3840-740.gif","icon":"","textColor":"dark"},"dataList":[{"summary":"啦啦啦","author":"wuwu","linksUrl":"#"}],"sceneCard":[],"txt":[]}

{"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"optioninfo":{"dynamic":"ture","static":"true"},"simplifiedDisplay":"newEdition","newCard":[{"iconImg":"https://img.alicdn.com/tfs/TB1JWN9qggP7K4jSZFqXXamhVXa-200-200.png","ifIcon":"img","link":"https://img.alicdn.com/tfs/TB1XY8hGYr1gK0jSZFDXXb9yVXa-1740-328.png","title":"Node.js 性能平台","des":"Node.js 性能平台（Node.js Performance Platform）是面向中大型 Node.js 应用提供 性能监控、安全提醒、故障排查、性能优化等服务的整体性解决方案。提供完善的工具链和服务，协助客户主动、快速发现和定位线上问题。","btn1":"申请开通","link1":"https://common-buy.aliyun.com/?spm=5176.179584.935956.btn1.6bd0276eYr3tGs&commodityCode=npp#/open","contentLink":"https://www.aliyun.com/product/nodejs","btn2":"产品文档","link2":"https://help.aliyun.com/product/60298.html?spm=5176.179584.935956.btn2.6bd0276eYr3tGs","infoGroup":[{"infoName":"入门指导","infoContent":{"firstContentName":"产品快速入门","firstContentLink":"https://help.aliyun.com/knowledge_detail/60338.html?spm=5176.179584.935963.2.6bd0276eYr3tGs","lastContentName":"常见问题","lastContentLink":"https://help.aliyun.com/knowledge_detail/60418.html?spm=5176.179584.935963.3.6bd0276eYr3tGs"}},{"infoName":"最佳实践","infoContent":{"firstContentName":"内存泄露案例","firstContentLink":"https://help.aliyun.com/document_detail/64011.html?spm=a2c4g.11174283.6.570.159030b1bBdKke"}},{"infoName":"产品动态","infoContent":{"firstContentName":"产品最新动态","firstContentLink":"https://www.aliyun.com/product/news?spm=5176.179584.1266814.211view.6bd0276eYr3tGs&category=233&product=261"}}],"btn3":""}],"card":[],"search":[],"infoCard":[],"title":{"mainTitle":"mPaaS","subtitle":"源自于支付宝小程序框架，亿级线上业务体量的锤炼，安全性媲美支付宝原生能力。不仅面向自有 App 投放小程序，更可快速构建打包，覆盖支付宝、淘宝、钉钉等应用。","linkUrl":"https://www.aliyun.com/product/mobilepaas/mpaas-miniprogram","btnText":"查看详情"},"visual":{"topbg":"https://img.alicdn.com/tfs/TB1bQuBIYH1gK0jSZFwXXc7aXXa-3840-740.gif","icon":"","textColor":"dark"},"dataList":[{"summary":"啦啦啦","author":"wuwu","linksUrl":"#"}],"sceneCard":[],"txt":[]}}