【译】D3入门

栏目: jQuery · 发布时间: 1年前

来源: juejin.im

内容简介:译注:本文使用D3的v3版本,当前最新版本v5可视化是理解想法和玩转数据的好工具。来自 Ideo 的 Tim Brown 在这篇文章中写道视觉思维不仅限于插图。它可以采取多种形式。思维导图、二乘二矩阵和其他视觉框架可以帮助以有价值的方式探索和描述想法,这些想法只需要几条直线和一些想象力。

本文转载自:https://juejin.im/post/5d124024f265da1b7a4b82f7,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

译注:本文使用D3的v3版本,当前最新版本v5

可视化是理解想法和玩转数据的好工具。来自 Ideo 的 Tim Brown 在这篇文章中写道

视觉思维不仅限于插图。它可以采取多种形式。思维导图、二乘二矩阵和其他视觉框架可以帮助以有价值的方式探索和描述想法,这些想法只需要几条直线和一些想象力。

特别是对于图形中的数据可视化,D3 可能会有所帮助。 D3 代表“数据驱动文档”,是 HTMLSVGJavaScript 可视化库。这篇文章是一个简短的概述,可以帮助您入门。

加载 D3

加载 D3 的最简单方法是从CDN加载脚本,例如:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
复制代码

或者,您可以从 github仓库 或项目网站 复制库。

重要说明 :通过添加带有对 D3.js 库的引用的脚本标记,可以获得要使用的 "d3" 对象。有了这个,您就拥有了一个在浏览器中呈现数据的工具。

d3 对象

d3对象有点类似于 jQuery 中的 “$” 对象。例如,您可以 “select” 类似 circle 标签这样的DOM节点。也可以使用 “append” 构建新节点。

d3对象还可以帮助您设置用于渲染图形的画布。你需要一个基于 “svg” 的画布。添加此 “svg” 是构建图形的第一步。因此,让我们定义以下构造:

var vis = d3.select("#graph")
            .append("svg");
复制代码

这将选择ID为 “#graph” 的DOM节点。然后,您可以使用以下方法添加图表的宽度和高度等属性:

var w = 900,
    h = 400;
vis.attr("width", w)
   .attr("height", h);
复制代码

你还可以添加文字

vis.text("The Graph")
复制代码

如果你在 jQuery 中使用选择器,那么选择和添加DOM节点应该看起来很熟悉。

放置节点

但是, D3jQuery 不同,因为它允许根据 “数据” “布局” 图形结构。这意味着,选择的DOM节点提供了许多不同的功能,而不是 jQuery 的相同选择。

一旦选择了DOM节点,就可以将数据 “连接” 到DOM节点!这是通过 data() 命令完成的。数据到节点的映射可能会感觉有点神奇,因为这会基于声明性语法添加关系。如果你最终有些困惑(就像我一样),你可以在这里阅读一些额外的解释

要进行第一次映射,我们首先定义节点:

var nodes = [{x: 30, y: 50},
             {x: 50, y: 80},
             {x: 90, y: 120}]
复制代码

因为我们从一个新的画布开始,所有节点都是新的,我们可以用 “selectAll” - “data” - “enter” 来映射它们:

vis.selectAll("circle .nodes")
   .data(nodes)
   .enter()
   .append("svg:circle")
   .attr("class", "nodes")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; })
复制代码

顺序是这样的:您选择一组DOM节点(可能存在或不存在)。然后,您将这些节点与数据连接起来,对于每个新的DOM节点,您可以指定标记名称( circle )并添加一个类和更多属性。

要实际查看圆圈,您必须设置 fill 属性:

vis.selectAll("circle .nodes")
   .data(nodes)
   .enter()
   .append("svg:circle")
   .attr("class", "nodes")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; })
   .attr("r", "10px")
   .attr("fill", "black") 
复制代码

这个结果应该类似于:

【译】D3入门

由于圆圈已绘制好了,您现在可以添加和删除数据,图表将自动更新:尝试此codepen

连接点

图表基于节点和 链接 。要渲染这些链接,您需要在圆圈之间添加线条。由于您具有圆的坐标,因此可以按如下方式添加行:

var links = [
  {source: nodes[0], target: nodes[1]},
  {source: nodes[2], target: nodes[1]}
]
复制代码

您可以使用线条 SVG 形状来连接点:

vis.selectAll(".line")
   .data(links)
   .enter()
   .append("line")
   .attr("class", "line")
   .attr("x1", function(d) { return d.source.x })
   .attr("y1", function(d) { return d.source.y })
   .attr("x2", function(d) { return d.target.x })
   .attr("y2", function(d) { return d.target.y })
   .style("stroke", "rgb(6,120,155)");
复制代码

我们有将坐标转换为线属性的功能。结果可以在这个codepen 中看到。您可以添加和删除数据,并查看图表是如何变化的。

【译】D3入门

进一步探索

对于小例子,使用 nodesedges 手动设置图形可能会很有趣。但是,如果您经常需要设置图形,或者 nodesedges 数量增加,也可以使用算法设置图形。这个时候力布局 就非常有用了。

有了这个,你可以像这个例子 一样设置一个图形:

【译】D3入门

D3 支持力布局算法,这里 是一个很好的起点。另一种选择可能是使用 D3插件 ,例如 图形插件

如果你有在图表上使用 D3 的不同方法的经验?请在hackernews留下反馈。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

AI极简经济学

AI极简经济学

阿杰伊·阿格拉沃尔、乔舒亚·甘斯、阿维·戈德法布 / 闾佳 / 湖南科技出版社 / 2018-12-1 / 58.00

人工智能正在以不可阻挡的态势席卷全球。无论是iPhone的神经网络引擎、AlphaGo的围棋算法,还是无人驾驶、深度学习……毫无疑问,人工智能正在改写行业形态。如同此前个人电脑、互联网、大数据的风行一般,技术创新又一次极大地改变了我们的工作与生活。 那么,究竟应该如何看待人工智能?在《AI极简经济学》一书中,三位深耕人工智能和决策领域的经济学家给出了清晰的答案。他们以坚实的经济学理论剖析动态,把握......一起来看看 《AI极简经济学》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换