D3.js使用简书

JavaScript032

D3.js使用简书,第1张

d3.js 是一个可以基于数据来操作文档的 JavaScript 库，可以帮你使用HTML CSS JS SVG Canvas 来展示数据，它结合强大的视图组件来驱动Dom操作.

d3引入的使用

也可以单独使用某个模块，比如单独使用d3-selection

可以模块化引入

Selections 允许强大的数据驱动文档对象模型(DOM)：设置attributes,styles,HTML 或 text 内容，选择集的方法通常选择当前的选择当前的选择集或者新的选择集，因此允许进行链式调用。

等价于：

选中符合条件的第一个元素，选择条件为 selector 字符串。如果没有元素被选中则返回空选择集，如果选择器有多个，那就返回匹配第一个选择集

选择所有与制定的selector匹配的元素，返回一个数组。如果没有元素被选中，则返回的空的选择集。

视图移动以及缩放是一种流行的交互技术 缩放行为通过 d3-zoom 模块来实现，缩放本身与DOM元素无关，可以用于SVG，HTML 或者 Canvas。

创建一个新的缩放行为,并返回该行为。zoom既是一个对象又是一个函数，通过selection.call()来应用到元素本身上

事件绑定 .zoom 双击禁用缩放 以及 禁止滚动齿轮缩放

步骤如下：

1、创建一个Web项目。

2、在d3.js官网首页下载d3.js：

3、把解压后的d3.js或者d3.min.js复制粘贴到WebContext目录下。

4、新建一个HTML文件，写入以下代码：

<html>

<head>

<meta charset="utf-8">

<script type="text/javascript" src="d3.min.js"></script>

<title>D3例子</title>

</head>

<body>

<p>改变前的文字</p>

<p>改编前的文字</p>

<script type="text/javascript">

d3.select("body").selectAll("p").text("改变后的文字")

</script>

</body>

</html>

5、部署项目，然后运行测试，效果如下，显示的是改变后的文字：

1、创建一个文件夹，这个文件夹有一个js文件夹和一个html文件。js文件夹用来存放需要引入的js文件。

2、打开html文件，在html文件上找到<body>，在<body>标签里创建一个按钮标签，然后给这个标签添加一个点击addJs事件。

3、在js文件夹下创建一个js文件为addJs.js。

4、在addJs.js文件上输入一个alert弹出框并保存，当引入js文件成功就会执行alert弹出框。

5、回到html文件，在按钮输入框后面创建一个script标签，然后添加用来引入addJs.js文件的addJs事件。

6、保存html文件后使用浏览器打开，点击按钮即可看到出现一个弹出，表示引入js文件成功。