随笔分类 - d3js
d3js可视化相关的技术博客
摘要：本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约。这个特点导致transform和postioning svg元素显得有些神秘，并且初看起来不是那么浅显易
阅读全文
摘要：我们知道d3的一般套路就是d3.selectAll('path.mypath').data(yourDataset).enter().append('path').attr('class','mypath').attr('d',thePathString) 而thePathString的获取，一般都
阅读全文
摘要：D3 layouts help you create more advanced visualisations such as treemaps: D3 layouts帮助您创造更加高级复杂的可视化图表，比如treemaps,packed circles,network graphs: Layout
阅读全文
摘要：在 Data joins 章节我们演示了当data和dom element个数相同时的情况 <div id="content"> <div></div> <div></div> <div></div> </div> 给定下面的数据 var myData = [ 10, 40, 20 ]; 当我们对d
阅读全文
摘要：Data joins 给定一个数据数组和一个 D3 selection 我们就可以attach或者说是'join'数组中的每个数据到selection中的每个元素上。 这将使得我们的数据和可视化元素之间建立紧密的联系并实现可视化成为可能。 比如如果我们有以下SVG的circles: <circle
阅读全文
摘要：D3 selections选择DOM元素以便可以对这些dom元素做相应的操作，比如：更改其style,修改其属性，执行data-join操作，或者插入、删除相应elements 比如，如果给定5个circles: 我们可以使用d3.selectAll来选中所有的circles，并且通过.style和
阅读全文
摘要：比例尺函数是这样的javascript函数： 接收通常是数字，日期，类别等data输入并且： 返回一个代表可视化元素的值，比如坐标，颜色，长度或者半径等 比例尺通常用于变换(或者说映射）抽象的数据值到可视量化变量（比如位置，长度，颜色等） 比如，假设我们有以下数组数据： [ 0, 2, 3, 5,
阅读全文
摘要：本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数，比如下面的: http://d3indepth.com/shapes/ lines curves pie chart segments symbols SVG 首先我们来认识一下SVG(scalable vector graphic
阅读全文
摘要：vuejs 是一个数据驱动视图的前端框架，一切皆可以作为可重用的组件加以使用。 d3则是数据可视化javascript库，如何将二者的长处相结合是一个挑战。 https://tyronetudehope.com/2016/12/13/composing-d3-visualizations-with-
阅读全文
摘要：如何使用d3来解析自定义格式的数据源？ 这样我们通过js filereader获取文件内容，之后通过上面的代码格式化就能形成javascript的对象以供我们使用 javascript以及D3中的数组操作方法 在javascript中对数组的操作总体上分为两类：一种是mutation的也就是执行对应
阅读全文
