最近因为Simulation and Data Visualisation 课程的老师要求我们提交一个包含图表交互操作的网页上去，必须d3.js实现。我一看截止日期，很好，只剩五天。先说下为什么我的笔记是’初学者‘，因为我的基础是这样子的：
- html+css
- javascript
- d3.js
以上完成作业所需要的所有技能，我均没有学过。因为我早早的就在大一放弃了前端coding，所以我只会写R和python，然而根本用不上。本篇将站在一个‘前端小白’的视角来分享//.// （最终效果演示请拉到最后！！！）
准备材料：
- d3.js 下载地址：D3.js - Data-Driven Documents 拉下去你就看到了一个.zip文件下载最新版就好了差别不大
- 一个编辑器。我用的是pycharm，老师推荐的是webstorm，但是我语言都不会，所以我决定还是不要学新的编辑器了
1.引用
在.html文件头部引用d3
<script src="d3.js" type="text/javascript"></script>好了引用完了。
2.概念理清
2.1 d3.js 和 javascript
JavaScript是一种语言，用于在html网页中插入代码，进行你需要的操作。有语言就有函数，有函数就有函数包，所以d3.js刚刚好就是这么一个函数包。其中函数的使用也就需要在<script>代码块中。
d3.js 功能主要强大在画图与交互操作方面，比如说这个你经常会看到一些图表旁边有按钮，按一下，图表就会有神奇的变化。这个神奇的变化d3就可以帮你实现。
2.2 另外
我从来没有接触过前端的语言所以我希望我的表达能够尽量的让初学者理解。因为我自己通过这样的方式能够学会，所以也希望大家也可以以更简单的方式去理解。
3. 使用d3画一个会动的柱状图
3.1 构建画布
你希望你的图画在网页的那一部分，就在建立画布的时候，将画布指向那里。
var 这里的位置指向有必要说一下。如果你是直接想画在<body>里，你可以
d3但是一般谁会直接画在<body>里呢，所以你可以给理想位置的标签添加类，比如我要画在某一个<div>里，那在创作这个标签时，只需要：
<就可以想我上面那样指定位置了。注意这里id和class的引用方式的区别。
ps. 除了以上定义你还可以搞个画布周边的空白。
var 后面计算位置的时候将它考虑进去就好了。
3.2 插入数据
var 
扫一扫
2141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
