JavaScript学习d3 的相关内容

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

【D3.js 学习总结】2、D3数据绑定

我们从Hello World示例代码来看D3如何做数据绑定 var demo = d3.select('body') .selectAll('p') .data(data, function (d) { return d; }); 这段代码执行了以下步骤： 1、通过 d3.select('body’) 将页面上的bod...

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

用过kissy的都知道它的选择器有 Node.one 和 Node.all 两个，前一个是选择第一个结果，后一个是选择所有结果；D3的选择器跟kissy类似，只是名字换成了 d3.select 和 d3.selectAll ，应该比较好理解；例如：选中body标签 var body = d3.select('body'); 选中所有p标签 var p = d3.selectAll('p').....

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

【D3.js 学习总结】9、D3布局-饼状图

d3.layout.pie() 在第4章D3 创建SVG里我们讲过圆弧图的制作方法，我们需要准备这样的数据才能画出圆弧： var angle = 2*Math.PI; var data = [ { startAngle: 0, endAngle: 0.2*angle }, { ...

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

【D3.js 学习总结】8、D3布局介绍

布局是 D3 中一个十分重要的概念，可以理解成 “制作常见图形的函数”，有了它制作各种相对复杂的图表就方便多了。D3 与其它很多可视化工具不同，相对来说较底层，对初学者来说不太方便，但是一旦掌握了，就比其他工具更加得心应手。下图展示了 D3 与其它可视化工具的区别：布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。 D3 总共提供了 12 个布局：饼状图（Pie）力导向图.....

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

【D3.js 学习总结】11、D3布局-弦图

d3.layout.chord() 弦图是一种用于描述节点之间联系的图表。弦图(Chord)的API说明 chord.chords - 取回计算的弦角度。 chord.groups - 取回计算的分组角度。 chord.matrix - 取得或设置布局需要的矩阵数据。 chord.padding - 取得或设置弦片段间的角填充。 chord.sortChords - 取得或设置用于弦的比较器.....

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

【D3.js 学习总结】10、D3布局-力学图

d3.layout.force() 力学图（也称为导向图，也有叫网络拓补图的，反正就是通过排斥得到关系远近的结构）在社交网络研究、信息传播途径等群体关系研究中应用非常广泛，它可以直观地反映群体与群体之间联系的渠道、交集多少，群体内部成员的联系强度等。力学(Force)的API说明 force.on - 监听布局位置的变化。(仅支持"start","step","end"三种事件) force.....

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

【D3.js 学习总结】13、D3布局-树状图

d3.layout.tree() 树状图（ Tree ）用于表示层级、上下级、包含与被包含关系，其布局的用法与集群图几乎完全相同，本章简单通过两个图的对比来讲述两种图表之间的不同之处。树状图集群图查看在线演示

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

【D3.js 学习总结】12、D3布局-集群图

d3.layout.cluster() 集群图是一种用于表示包含与被包含关系的图表。集群图(Cluster)的API说明 cluster.children - 取得或者设置子节点的访问器函数。 cluster.links - 技术树节点之间的父子连接。 cluster.nodeSize - 为每个节点指定固定的尺寸。 cluster.nodes - 计算集群布局并返回节点数组。 cluste.....

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

【D3.js 学习总结】14、D3布局-打包图

d3.layout.pack() 打包图用于表示包含与被包含的关系，也可表示各对象的权重，通常用一圆套一圆来表示前者，用圆的大小来表示后者。打包图(Pack)的API说明 pack.children - 取得或设置子节点的访问器。 pack.links - 计算树节点中的父子链接。 pack.nodes - 计算包布局并返回节点数组。 pack.padding - 指定布局间距（以像素为单位.....

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

【D3.js 学习总结】15、D3布局-堆栈图

d3.layout.stack() 什么是堆栈图。例如，有如下情况：某公司，销售三种产品：个人电脑、智能手机、软件。 2005年，三种产品的利润分别为3000、2000、1100万。 2006年，三种产品的利润分别为1300、4000、1700万。计算可得，2005年总利润为6100万，2006年为7000万。如果要将2005年的总利润用柱形表示，那么应该画三个矩形，三个矩形堆叠在一起.....

共有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":[]}}