我们知道d3的一般套路就是d3.selectAll('path.mypath').data(yourDataset).enter().append('path').attr('class','mypath').attr('d',thePathString)

而thePathString的获取,一般都是根据绑定的yourDataset来生成的。具体生成方式有:

1. 通过程序自己一节一节地拼凑起来path的d属性,比如在d3v4中由于取消了diagonal对角线生成器,我们可以通过下面的代码手工拼凑连接节点之间的link:

var link = svg.selectAll(".link")
.data(root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});

2. 通过d3.path()的相关命令API

const context = d3.path();
context.moveTo(50, 50);
context.lineTo(100, 50);
context.arc(100, 100, 50, -0.5 * Math.PI, 0);
context.lineTo(150, 150);
console.log(context.toString())
//输出 M50,50L100,50A50,50,0,0,1,150,100L150,150

3. 通过d3js built in path generator来创建

d3内置有以下path generator,都在d3-shape模块中可以找到: line, arc, pie,area,radialArea, linkVertical,linkHorizontal(替代d3 v3中的diagonal),linkRadial,symbol

特别是第三种方法在常见的图表设计中非常常见,也很方便。但是虽然这种方法解放了我们拼凑d属性的烦恼,但是这些generator的data输入却有一定的要求。

比如arc()弧线生成器,它就要求输入data具有下面的数据结构:

var arcitemdata = {
startAngle: 0, // 弧线的起始角度
endAngle: Math.PI *0.6 // 弧线的结束角度
}

area()区域生成器,它就要求输入点data具有下面的数据结构(或者指定对应的accessor function来获取到对应的y0,y1数据):

var dataItemForArea =[
{
y0: 10, // y0为baseline的y轴值,一般所有的点y0值相等,也可以不等哦
y1: 20, // y1为topline的y轴值
},
{
y0: 10,
y1: 30,
},
{
y0: 10,
y1: 25
}

而一般来说,我们有的数据只是原始的数据,并不能够直接用于绘制。(比如没有startAngle, endAngle我们就无法画弧线)如何转换成方便被不同的路径生成器来使用的数据格式呢?当然你可以自己写一段程序一一映射,可以想象这,又是一个非常繁琐的过程。幸运的是d3也为我们考虑到了这些,它提供了被称为layout的函数,通过这些layout就能将原始的数据,转换为易于被可视化绘图所使用的数据(不一定非要用路径生成器来做可视化哦,很多情况下,你可以直接使用d3的select,data,enter,append,attr的模式来直接消费使用这些转换过来的数据!)

d3为一些复杂的图表分别内置了不同的layout函数。比如:

pie,Force, Chord, Tree, Cluster, Bundle, Pack, histogram generator(直方图),partition, Stack, Treemap,ribbon(d3-chord)(和弦图),geoPath(d3-geo),geoCircle,geoGraticule,axisTop,axisRight,axisBottom,axisLeft等。

比如说,我们给定一个数组,要求生成饼状图,这时我们想到的是首先将原始数据转换为arc元图所需数据数组,随后应用弧生成器来绘制。根据上面我们提到的,arc弧生成器需要一些startAngle, endAngle以及innerRadius,outerRadius来唯一描述一个弧段。这时,我们就可以应用arc layout来转换原始数据了!看下面的例子:

var data = [1, 1, 2, 3, 5, 8, 13, 21];
var arcsData = d3.pie()(data);
console.log(arcsData)
//[
// {"data": 1, "value": 1, "index": 6, "startAngle": 6.050474740247008, //"endAngle": 6.166830023713296, "padAngle": 0},
// {"data": 1, "value": 1, "index": 7, "startAngle": 6.166830023713296, //"endAngle": 6.283185307179584, "padAngle": 0},
// {"data": 2, "value": 2, "index": 5, "startAngle": 5.817764173314431, //"endAngle": 6.050474740247008, "padAngle": 0},
// {"data": 3, "value": 3, "index": 4, "startAngle": 5.468698322915565, //"endAngle": 5.817764173314431, "padAngle": 0},
// {"data": 5, "value": 5, "index": 3, "startAngle": 4.886921905584122, //"endAngle": 5.468698322915565, "padAngle": 0},
// {"data": 8, "value": 8, "index": 2, "startAngle": 3.956079637853813, //"endAngle": 4.886921905584122, "padAngle": 0},
// {"data": 13, "value": 13, "index": 1, "startAngle": 2.443460952792061, //"endAngle": 3.956079637853813, "padAngle": 0},
// {"data": 21, "value": 21, "index": 0, "startAngle": 0.000000000000000, //"endAngle": 2.443460952792061, "padAngle": 0}
//]
// 接下来我们就可以使用arc generator了
var arcPath = d3.arc()
arcPath.innerRadius = 0; // 内径为0,因此就是一个圆了,而不是扇形
arcPath.outerRadius = 100; // 外径为100
svg.selectAll('path).data(arcsData).enter().append('path').attr('d',arcPath)

从上面这个pie图的例子中我们看到经过pie() layout函数变换后,就生成了一堆包含了startAngle, endAngle的对象数组(角度之和为360度),而这些可以总结出来,在应用layout最终实现数据可视化时,也有章可循,分为三步:

1.  获取原始数据

2. 对原始数据调用对应的layout来转换数据(你也可以创作自己的layout函数哦!)

3. 使用路径生成器或者最原始的可视化pattern来使用第2.步骤转换来的中间数据!

d3js path generator vs layouts的更多相关文章

  1. 《Connecting the Dots: A Knowledgeable Path Generator for Commonsense Question Answering》一文的理解和总结

    构建常识问答知识路径生成器 论文贡献 ​ 提出学习一个多跳知识路径产生器来根据问题动态产生结构化证据.生成器以预先训练的语言模型为主干,利用语言模型中存储的大量非结构化知识来补充知识库的不完整性.路径 ...

  2. d3js shape深入理解

    本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数,比如下面的: http://d3indepth.com/shapes/ lines curves pie chart segment ...

  3. D3 JS study notes

    如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited t ...

  4. D3js-API介绍【英】

    Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the cur ...

  5. SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理

    20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...

  6. ES6学习笔记(十四)

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Prom ...

  7. 8个实用的SVG工具,20 个有用的 SVG 工具,五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

  8. 把时间还给洞察,且看PPT调研报告自动生成攻略

    文/JSong @2017.02.28 在数据分析里面有一句话是说,80%的时间要用于数据清洗和整理,而我觉得理想的状态应该是把更多的把时间花在数据背后的洞察当中.去年11月在简书占了个坑,说要自己写 ...

  9. DFS and BFS

    DFS https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master ...

随机推荐

  1. CentOS7.4安装Java8

    官网下载Jdk8Linux64位版本: 使用MobaXterm工具连接远程Linux系统: 上传刚才下载好的文件到远程系统下 /usr/local/ 文件夹: 先进入压缩包所在目录再输入命令解压jdk ...

  2. PMP备考指南之第二章:项目运作环境

    本文已同步至 GitHub/Gitee/公众号,感兴趣的同学帮忙点波关注~ 第二章:项目运作环境 1. 事业环境因素.组织过程资产 事业环境因素 Enterprise Environmental Fa ...

  3. xgboost 参数

    XGBoost 参数 在运行XGBoost程序之前,必须设置三种类型的参数:通用类型参数(general parameters).booster参数和学习任务参数(task parameters). ...

  4. docker 私有仓库的创建

    1, 下载registry镜像 sudo docker pull registry 2, 启动镜像 docker run -d --name registry -h registry -p 5000: ...

  5. 使用DataTrigger来代替Triggerr

    普通的Trigger监听鼠标移入的代码如下: <Trigger Property="IsMouseOver" Value="true">     & ...

  6. RabbitMQ上手记录–part 4-节点集群(单机多节点)

    现在互联网应用动不动就说要HA,好像不搞个HA都不好意思说自己的应用能承载高并发,大用户量访问.RabbitMQ这个经典的消息组件,也必然逃不掉单点失效的尴尬局面.当然在RabbitMQ在被广泛应用于 ...

  7. PHP初级篇

    PHP初级篇 PHP环境搭建: 企业中常用到的环境是:Linux+Apache+MySQL+PHP 学习环境是:Windows+Apache+MySQL+PHP 工具 Apache 2.4.4 MyS ...

  8. MongoDB之集合管理一

    最近的几篇博客都是关于MongoDB的,虽然个人感觉也没多少知识点,但没想到竟然有转载我的博客的,不管有经过我同意还是没经过我同意,说明写的应该还是有价值的,这也是我写博客的一个动力之一吧.上一博客学 ...

  9. 安装ftp服务

    1.首先判断你服务器上是否安装了vsftpd 2.安装vsftpd 3.配置文件/etc/vsftpd/vsftpd.conf 禁止匿名用户登录,把YES改为NO,默认为YES 限制ftp用户跳出家目 ...

  10. angularjs 依赖注入原理与实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了“削减计算机程序的耦合问题” ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是 ...