d3js力导向布局图

① 有哪些用 javaScript 实现的图形库

D3.js

D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM，然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的
HMTL 表格，或是利用它的流体过度和交互，用相似的数据创建惊人的 SVG 条形图。

ChartJS

Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas
基础上。目前，它支持6种图表类型(折线图，条形图，雷达图，饼图，柱状图和极地区域区)。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于
5KB。

Highcharts JS

Highcharts JS 是一个制作图表的纯 Javascript 类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE
和火狐等等;对个人用户完全免 费;纯JS，无BS;支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;跨语言：不管是
PHP、Asp.net 还是 Java 都可以使用。

Fusioncharts

FusionCharts Suite XT 是个专业的 JavaScript
图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可 点击的
legend 关键字，还有 dril-down，缩放/滚动 和单击打印图表功能。

Flot

Flot 是受 Plotr 和 PlotKit 的 启发，Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为
flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+,
Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

Chartist.js

Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图，可以被控制，并通过对 CSS3 媒体查询和 SASS
定制。另外 Chartist.js 提供很酷的动画。

n3-charts

如果你是一个 AngularJS 开发者，你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上，提供了可定制的
AngularJS 指令的形式不同标准的图表。

Ember Charts

Ember Charts 是一个基于 Ember.js 和 D3.js
的图表库。它包括时间序列、柱状图、饼图、点图，很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践，是高度可定制和可扩展的。

Chartkick

Chartkick 是专为 Ruby 应用程序的 JavaScript
图表库。它提供了所有主要的图表类型，如饼图，柱形图，条形图，面积，地理，时间，以及多个系列。

MeteorCharts

它有一个很酷的图表生成器，为您提供选项来选择图表，选择主题，然后生成一个图表。

amCharts

amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5
Stock Chart、JavaScript Maps 三种图表组件。

EJS Chart

EJS图表声称自己是企业准备的图表库。图表看起来很干净，可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。

uvCharts

uvCharts 是一个开源的 JavaScript 图表库，号称有100多个自定义选项。它拥有12种不同的标准图表类型，开箱即用。

ECharts

基于 Canvas，纯 JavaScript
图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。

② D3.js的V5版本-Vue框架中使用-树状图

一. api简介

d3.tree()，创建一个树状图生成器
d3.tree().size()，定义树的大小
d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据
node.descendants()得到所有的节点，已经经过转换的数据
node.links()，得到所有的边，已经经过转换的数据

二.Vue中使用

*点击节点可展开收缩

③ 什么是力导向布局图

力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的。根据力的作用，来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。

力导向图能表示节点之间的多对多的关系

④ D3图表绘制

本节内容将描述饼状图、力导向图、弦图、集群图、树状图、打包图、分区图、圆形分区图、直方图、捆图、堆栈图、矩阵树图、地图的绘制过程，参考 D3.js入门系列

温馨提示：对于有D3基础的人，本节内容能够帮助其快速掌握各图表的绘制。若没有掌握基础知识，不建议直接学习本节内容。

对图表绘制的重点内容进行了总结，下述图表绘制步骤相似，总结如下：

布局内容总结：

转换后的数据：

弧生成器计算路径（svg的path）

绘制路径path，需要调用弧生成器

或者

绘制文本text，计算路径中心位置，放入文本值

转换后的数据：

然后，使力学作用生效：

绘制节点时，使节点拖动

力导向图布局force有一个事件tick，每进行到一个时刻，都要调用它，更新的内容就写在它的监听器里就好。

数据转换

转换后的数据：

首先绘制外部圆环，使用arc弧生成器

绘制path，使用数据为groups

绘制text,使用数据为groups。首先旋转适当角度，然后向上移动外半径个长度，135-225度范围的文字倒置

然后，绘制弦，使用chord生成器生成路径

绘制path,使用数据为chords

使用数据

转换后的数据：

首先，创建对角线生成器

绘制连线，使用生成器

然后绘制节点circle。

和集群图写法基本相同，使用布局不同。

转换后的数据与集群图相同。

数据格式与树状图相同，布局如下：

数据转换写法也类似。

转换后的数据：

然后分别绘制circle和text。

数据类型与集群图、树状图、打包图相同。用于表示包含与被包含关系的。布局如下：

value设定表示分区大小的值。这里的意思是：如果数据文件中用size值表示结点大小，那么这里可写成return d.size。

数据转换写法也类似。（nodes、links）

转换后的数据：

然后绘制rect和text。rect的width、height属性分别对应数据属性dx、dy。

与前面相同。

数据转换写法也类似。（nodes、links）

转换后的数据：

分别绘制path和text。

首先创建弧生成器。

绘制path使调用弧生成器。

绘制text时要进行一下转换：

数据转换

转换后的数据：

矩形rect、坐标轴line、刻度line、文字text。

需要使用集群图布局和捆图布局。

转换后的数据：

创建放射式的线段生成器：

首先绘制path，调用线段生成器:

接着创建g，在g中绘制circle和text

绘制g需要旋转、平移：

创建堆栈图布局

数据转换

转换后的数据：

分别绘制矩形rect、圆形circle、文字text、坐标轴axis，绘制过程与柱形图相似。

创建矩阵树图布局

数据转换

转换后的数据：

分别绘制矩形rect、文字text。

更多内容： Github个人博客
备注：本文发表于 https://cnyangkui.github.io/2017/11/15/d3-graphlist/

⑤ 初识 D3.js ：打造专属可视化

随着现在自定义可视化的需求日益增长，Highcharts、echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了，这个时候D3的无限定制的能力就脱颖而出。

如果想要通过D3完成可视化，除了对于D3本身API的学习, 关于web标准的HTML, SVG, CSS, Javascript 和 数据可视化的概念以及标准都是需要学习的。这无疑带来了较高的学习门槛，但这也是值得的，因为掌握 D3 后，我们几乎可以实现任何 2d 的可视化需求。

本文通过对D3核心模块分析以及进行具体案例实践的方式，来帮助初学者学习了解D3的绘图思路。

D3的全称是 Data-Driven Documents（数据驱动文档），是基于数据来操作文档的 JavaScript 库，其核心在于使用绘图指令对数据进行转换，在源数据的基础上创建新的可绘制数据， 生成SVG路径以及通过数据和方法在DOM中创建数据可视化元素（如轴）。

相对于Echats等开箱即用的可视化框架来说，D3更接近底层，它可以直接控制原生的SVG元素，并且不直接提供任何一种现成的可视化图表，所有的图表都需我们在它的库里挑选合适的方法构建而成，这也大大提高了它的可视化定制能力。而且D3 没有引入新的图形元素，它遵循了web标准（HTML, CSS, SVG 以及 Canvas ）来展示数据 ，所以它可以不需要依赖其他框架独立运行在现代浏览器中。

在V4版本后，D3的 API 现在已经被拆分成一个个模块，我们可以根据自己的可视化需求进行按需加载。根据泛义可以将D3 API模块分为以下的几大类： DOM操作、数据处理，数据分析转换、地理路径，行为等 。

这里我们主要对 D3-selection 和 D3-scale 模块进行解析：

D3-selection （选择集） 是 D3js的核心模块，主要是用来进行选择元素，设置属性、数据绑定，事件绑定等操作。

选择元素： D3-selection 提供了两种方法来获取目标元素，d3.select()：返回目标元素的第一个节点，d3.selectAll()：返回目标元素的集合，乍一看有点类似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一个 selection 对象，querySelector 返回的是一个 NodeList 数组。通过控制台打印的信息，可以看到 selection 下的 groups 存放了所有选择的元素集合，parents 存放了所有选中元素的父节点。

设置属性或者绑定事件： 我们不需要关心 groups 的结构是怎么样的。当调用 selection.attr 或者 selection.style 的时候, selection 中的所有 group 的所有子元素都会被调用，group 存在的唯一影响是: 当我们传参是一个function 的时候，例如 selection.attr('attrName', function(data, i)) 或 selection.on('click', function(data, i)) 时， 传递的 function(data, i) 中, 第二个参数 i 是元素在 group 中的索引而不是在整个 selection 中的索引。

数据绑定： 实际上是给选择的DOM元素的 __data__ 属性赋值，这里提供了3种方式进行数据绑定：

（1）给每一个单独的 DOM 元素调用 selection.datum：d3.select('body').datum(20) 等价于 document.body.__data__ = 20

（2）从父节点中继承来数据, 比如: append , insert , select，子节点会主动继承父节点的数据：

（3） 调用 selection.data() 方法，支持传入装有基础数据类型的数据，也支持传入一个function(parentNode, groupIndex)根据节点索引与数据做映射，data()方法引入了 d3 中非常重要的 join 思想:

绑定 data 到 DOM 元素， 在D3中是通过比较 data 和 DOM 的 key 值来找到对应关系的。 如果我们没有单独设置 key 值，那么默认根据 data 的下标索引来设定，但是当数据顺序发生改变，这个默认下标 key 值 就变得不可靠了，这时我们可以使用 selection.data(data, keyFunction) 中的第二个参数 keyFunction，根据当前的数据返回一个对应的 key 值。通过下面的图例可以看出，不管是有一个还是多个 group（每个group 都是独立的），只要我们保证在任意一个 group 中的 key 值是唯一的，数据一旦发生变化都会反映给对应的 DOM 元素（ update 的过程）：

上面提到的都是data数据和DOM元素数量相同的情况下的数据绑定，那如果data数据和DOM元素数量不相同时，我们来看看 D3 又是如何进行数据绑定的：现在终于可以来介绍 D3-selecion 模块的核心 Join 思想了，这个思想简单来说就是 “不应该告诉D3去怎么创建元素, 而是告诉D3，.selectAll() 得到的 selecion 集合应该和 .data(data) 绑定的数据要怎么一一对应”。

从上图可以看出，在进行 d3.data(data) 数据绑定的时候，会产生三种状态的选择集：

用 Join 的方式来理解意味着，我们要做的事情仅仅是声明 DOM集合和数据集合之间的关系, 并且通过处理三个不同状态的集合 enter、update 、 exit 来描述这种关系。这种方式可以大大简化我们对DOM元素的操作，我们不需要再用 if 和 for 循环的方式来进行复杂的逻辑判断，来得到我们需要得到的元素集合。并且在处理动态数据的时候，可以通过处理这三种状态，轻松的展示实时数据和添加平滑的动态交互效果。

D3-scale （比列尺） 提供多种不同类型的比例尺。经常和 D3-axis 坐标轴模块一起使用。

D3-scale 提供了多种连续性和非连续性的比例尺，总体可以将他们分为三大类：

常用的一些比例尺：

（1）d3-scaleLinear 线性比例尺(连续性输入和连续性输出)

可以看出，调用d3.scaleLinear()可以生成线性比例尺，domain()是输入域，range()是输出域，相当于将domain中的数据集映射到range的数据集中。

使用示例：

映射关系：

（2）d3-scaleTime 时间比例尺(连续性输入和连续性输出)

时间比例尺与线性比例尺类似，只不过输入域变成了一个时间轴。正常我们使用比例尺都是个正序的过程，但是D3也提供了invert()以及invertExtent()方法，我们可以通过输出域中的具体值得出对应输入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(连续性输入和离散性输出)

量化比例尺是将连续的输入域根据输出域被分割为均匀的片段，所以它的输出域是离散的。

使用示例：

映射关系：

（4）d3. scaleThreshold 阈值比例尺(连续性输入和离散性输出)

阈值比例尺可以为一组连续数据指定分割阈值，阈值比例尺默认的 domain：[0.5] 以及默认的 range：[0, 1] ，因此默认的 d3.scaleThreshold() 等价于 Math.round 函数。 阈值比例尺输入域为 N 的话，输出域必须为 N + 1，否则比例尺对某些值可能会返回 undefined，或者输出域多余的值会被忽略。

使用示例：

存在三种映射关系：

a. 当domain和range的数据是 N : N+1

b. 当domain和range的数据是 N : N + 大于1

c. 当domain和range的数据是 N + 大于0 : N

（5）d3.scaleOrdinal 序数比例尺(离散性输入和离散性输出)

与scaleLinear等连续性比例尺不同，序数比例尺的输出域和输入域都是离散的。

使用示例：

存在三种映射关系：

a.当domain和range的数据是一一对应

b.当domain少于range的数据

c.当domain多于range的数据

通过以上的学习，应该对d3是如何操作DOM以及坐标轴的数据映射为相应的可视化表现有了一定的了解，下面我们来实际运用这两个模块，来实现我们常见的可视化图表：柱状图。

（1）首先添加一个SVG元素。

（2）根据我们上面说到 d3.scale 模块以及 d3.axis 模块绘制坐标轴，d3.scaleBand() 叫做序数分段比例尺，类似我们说的 d3.scaleOrdinal() 序数比例尺，但是它支持连续的数值类型的输出域，离散的输入域可以将连续的范围划分为均匀的分段。这里再讲一个细节，在绘制网格的时候，我们并没有额外添加 line 元素来实现，而是通过 d3.axis 坐标轴模块的 axis.ticks() 方法对坐标轴刻度进行了设置，通过 tickSIze() 设置了刻度线长度，来模拟和图表宽度相等的网格线，并且还可以通过 tickFormat() 对Y轴刻度值进行格式化转换。

（3）坐标轴绘制好了后，我们通过数据绑定来绘制与之对应的矩形(rect)元素了。

（4）这个时候柱状图已经基本绘制好了，我们再丰富内容展示，添加标签、标题等提示信息。

（5）最后我们通过给柱子绑定监听事件，实现tooltips的信息浮层交互。

通过对 d3.selection 、d3.scale 以及 d3.axis等模块的学习，我们已经可以绘制出常用的柱状图等图表，我们也可以通过d3提供的其他模块绘制出更加复杂的可视化效果，例如通过 d3-hierarchy(层级模块) 实现层级树图可视化，d3-geo(地理投影) 实现地图数据可视化等，本文讲解的内容还只是D3库的冰山一角。所以等我们掌握了D3后，限制我们实现可视化的不再是技术而是想象力。

⑥ echarts 怎样用js自定义图表数据

引入ECharts

echarts提供多种引入方式，请根据你的项目类型选择合适的方式：

模块化包引入

如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。

需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。

//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});

模块化单文件引入（推荐）

如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。

自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：

• dist（文件夹） : 经过合并、压缩的单文件

• line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）

• bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）

• scatter.js : 散点图

• k.js : K线图

• pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）

• radar.js : 雷达图

• map.js : 地图

• force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）

• chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）

• funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）

• gauge.js : 仪表盘

• eventRiver.js : 事件河流图

• treemap.js : 矩阵树图

• venn.js : 韦恩图

• echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入

• chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载

• source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件

• //from echarts example


• <body>


• <div id="main" style="height:400px;"></div>


• ...


• <script src="./js/echarts.js"></script>


• </body>



在主文件引入后你将获得一个AMD环境，配置require.conifg如下：

• //from echarts example


• <body>


• <div id="main" style="height:400px;"></div>


• ...


• <script src="./js/echarts.js"></script>


• <script type="text/javascript">


• require.config({


• paths: {


• echarts: './js/dist'


• }


• });


• </script>


• </body>



require.config配置后就可以通过动态加载使用echarts

• //from echarts example


• <body>


• <div id="main" style="height:400px;"></div>


• ...


• <script src="./js/echarts.js"></script>


• <script type="text/javascript">


• require.config({


• paths: {


• echarts: './js/dist'


• }


• });


• require(


• [


• 'echarts',


• 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表


• 'echarts/chart/bar'


• ],


• function (ec) {


• var myChart = ec.init(document.getElementById('main'));


• var option = {


• ...


• }


• myChart.setOption(option);


• }


• );


• </script>


• </body>



总结来说，模块化单文件引入ECharts，你需要如下4步：

• 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）

• 通过script标签引入echarts主文件

• 为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明

• 动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

详见入门教程 ( Getting started ) »

标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

• //from echarts example


• <body>


• <div id="main" style="height:400px;"></div>


• ...


• <script src="example/www2/js/dist/echarts-all.js"></script>


• <script>


• var myChart = echarts.init(document.getElementById('main'));


• var option = {


• ...


• }


• myChart.setOption(option);


• </script>


• </body>

⑦ d3.js中力导向图的节点怎么用包图

var force = d3.layout.force()//layout将json格式转化为力学图可用的格式
.nodes(d3.values(nodes))//设定节点数组
.links(links)//设定连线数组
.size([width, height])//作用域的大小
.linkDistance(180)//连接版线长度
.charge(-1500)//顶点的电荷权数。该参数决定是排斥还是吸引，数值越小越互相排斥
.on("tick", tick)//指时间间隔，隔一段时间刷新一次画面
.start();//开始转换

⑧ d3.js与jquery的区别

d3.js和jQuery都有个相同之处，就是它们都是js界的著名工具库。但是它们所面对的领域不一回样。
d3.js主要是做数据可答视化的，也就是各种炫酷的图表，比如折线图、弦图、力导向图等等。而jQuery主要是做页面DOM控制、AJAX和动画的。

⑨ d3.js画力学图,怎么把图限制在边框内

我上次看了，他这个都明白了，你可以看看，他每一步都有代码，注释，很简单的。

网页链接

⑩ 如何使用d3.js制作可视化图表

D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。

D3的特点

允许绑定任意数据到DOM，将数据驱动转换应用到Document中。

不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。

支持SVG，在Web页面上渲染毫无压力。

回到顶部

D3的使用方法

关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。

<!DOCTYPEhtml>
<metacharset="utf-8">
<style>

svg{
font:10pxsans-serif;
}

.y.axispath{
display:none;
}

.y.axisline{
stroke:#fff;
stroke-opacity:.2;
shape-rendering:crispEdges;
}

.y.axis.zeroline{
stroke:#000;
stroke-opacity:1;
}

.title{
font:30078pxHelveticaNeue;
fill:#666;
}

.birthyear,
.age{
text-anchor:middle;
}

.birthyear{
fill:#fff;
}

rect{
fill-opacity:.6;
fill:#e377c2;
}

rect:first-child{
fill:#1f77b4;
}

</style>
<body>
<scriptsrc="http://d3js.org/d3.v3.min.js"></script>
<script>

varmargin={top:20,right:40,bottom:30,left:20},
width=960-margin.left-margin.right,
height=500-margin.top-margin.bottom,
barWidth=Math.floor(width/19)-1;

varx=d3.scale.linear()
.range([barWidth/2,width-barWidth/2]);

vary=d3.scale.linear()
.range([height,0]);

varyAxis=d3.svg.axis()
.scale(y)
.orient("right")
.tickSize(-width)
.tickFormat(function(d){returnMath.round(d/1e6)+"M";});

//AnSVGelementwithabottom-rightorigin.
varsvg=d3.select("body").append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");

//.
varbirthyears=svg.append("g")
.attr("class","birthyears");

//Alabelforthecurrentyear.
vartitle=svg.append("text")
.attr("class","title")
.attr("dy",".71em")
.text(2000);

d3.csv("population.csv",function(error,data){

//Convertstringstonumbers.
data.forEach(function(d){
d.people=+d.people;
d.year=+d.year;
d.age=+d.age;
});

//.
varage1=d3.max(data,function(d){returnd.age;}),
year0=d3.min(data,function(d){returnd.year;}),
year1=d3.max(data,function(d){returnd.year;}),
year=year1;

//Updatethescaledomains.
x.domain([year1-age1,year1]);
y.domain([0,d3.max(data,function(d){returnd.people;})]);

//[male,female].
data=d3.nest()
.key(function(d){returnd.year;})
.key(function(d){returnd.year-d.age;})
.rollup(function(v){returnv.map(function(d){returnd.people;});})
.map(data);

//.
svg.append("g")
.attr("class","yaxis")
.attr("transform","translate("+width+",0)")
.call(yAxis)
.selectAll("g")
.filter(function(value){return!value;})
.classed("zero",true);

//(sothatnoenterorexitisrequired).
varbirthyear=birthyears.selectAll(".birthyear")
.data(d3.range(year0-age1,year1+1,5))
.enter().append("g")
.attr("class","birthyear")
.attr("transform",function(birthyear){return"translate("+x(birthyear)+",0)";});

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.enter().append("rect")
.attr("x",-barWidth/2)
.attr("width",barWidth)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});

//Addlabelstoshowbirthyear.
birthyear.append("text")
.attr("y",height-4)
.text(function(birthyear){returnbirthyear;});

//Addlabelstoshowage(separate;notanimated).
svg.selectAll(".age")
.data(d3.range(0,age1+1,5))
.enter().append("text")
.attr("class","age")
.attr("x",function(age){returnx(year-age);})
.attr("y",height+4)
.attr("dy",".71em")
.text(function(age){returnage;});

//.
window.focus();
d3.select(window).on("keydown",function(){
switch(d3.event.keyCode){
case37:year=Math.max(year0,year-10);break;
case39:year=Math.min(year1,year+10);break;
}
update();
});

functionupdate(){
if(!(yearindata))return;
title.text(year);

birthyears.transition()
.ration(750)
.attr("transform","translate("+(x(year1)-x(year))+",0)");

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.transition()
.ration(750)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});
}
});