学编程入门的第一个程序都是在屏幕上输出 Hello World,所以本节D3的学习也将从该程序入手进行简单的操作。
第一个程序 Hello World
-
java
public class HelloWorld { public static void main(String[] args) { System.out.println("HelloWorld!"); } }
-
c 语言
#include <stdio.h> int main() { printf("HelloWorld! \n"); }
-
php
<?php echo "HelloWorld!"; ?>
-
node.Js
var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); response.write('hello world'); response.end(); }).listen(8000);
-
HTML
<body> <div id="box">hello world</div> </body>
-
D3
d3.select("body").text("hello world!")
数据绑定
-
D3 中是通过以下两个函数来绑定数据的(
data()常用
):- data():绑定一个数组到
选择集
上,数组的各项值分别与选择集的各元素绑定 - datum():绑定一个数据到选择集上
- data():绑定一个数组到
-
data()示例
var datas=[1,2,3]; d3.select("...").data(datas).text((d,i)=>{ return d; })
插入、删除元素
DOM基础结构
<template>
<div class="dataBind">
<h3></h3>
<h3></h3>
<h3 class="three"></h3>
</div>
</template>
-
插入
插入元素涉及的函数有两个:
-
append()
:只能在选择集末尾
插入元素this.d3.select(".dataBind").append("h3").text("我是append添加的p标签");
-
insert()
:可以指定
将新元素插入在什么位置this.d3.select(".dataBind").insert("h3","h3:nth-child(1)").text("我是insert添加的p标签");
-
-
删除(
remove()
)this.d3.select(".dataBind").select(".three").remove();
enter()
-
描述
在将数据绑定到选择结果时,每个数值都被分配到了对应的选择元素。如果选择元素的数量比数据数量要少,多余的数据则进入了 enter 选择器。
-
?
//基础结构是上面的结构 //数据:dataBind: ["标签一", "标签二", "标签三", "1"] this.d3 .select(".dataBind") .selectAll("h3") .data(this.dataBind) .enter() .append("p") .text(d => { return d; }) .style("color", "red");
-
效果图
简单的图表(折线图)
-
代码
getDemo() { // 图表的宽度和高度 var width = 1000; var height = 600; // 预留给轴线的距离 var padding = { top: 100, right: 100, bottom: 100, left: 100 }; var dataset = [[1, 224],[2, 328],[3, 156],[4, 232],[5, 382],[6, 304],[7, 366]]; //数据最大最小值 var min = this.d3.min(dataset, function(d) { return d[1]; }); var max = this.d3.max(dataset, function(d) { return d[1]; }); //比例尺 var xScale = this.d3 .scaleLinear() .domain([1, 7]) //比例尺的定义域 .range([0, width - padding.left - padding.right]); //比例尺的值域 var yScale = this.d3 .scaleLinear() .domain([0, max]) .range([height - padding.top - padding.bottom, 0]); //添加svg var svg = this.d3 .select("body") .append("svg") .attr("width", width + "px") .attr("height", height + "px"); //刻度线位置 var xAxis = this.d3.axisTop().scale(xScale); var yAxis = this.d3.axisLeft().scale(yScale); //添加表标题 svg .append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("fill", "#000") .style("font-size", "18px") .style("text-decoration", "underline") .text("月销售表"); //添加x轴坐标轴 svg .append("g") .attr("class", "axis") .attr( "transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")" ) .call(xAxis) .append("text") .style("fill", "#000") .style("text-anchor", "middle") .attr( "transform", "translate(" + (width - padding.left - padding.right) + "," + 20 + ")" ) .text("月份"); //添加y轴坐标轴 svg .append("g") .attr("class", "axis") .attr( "transform", "translate(" + padding.left + "," + padding.top + ")" ) .call(yAxis) .append("text") .style("fill", "#000") .style("text-anchor", "middle") .attr("transform", "translate(" + 0 + "," + -10 + ")") .text("销售量"); // 坐标轴上的线 var linePath = this.d3 .line() .x(function(d) { return xScale(d[0]); }) .y(function(d) { return yScale(d[1]); }); // 折线图上的线 svg .append("g") .append("path") .attr("class", "line-path") .attr( "transform", "translate(" + padding.left + "," + padding.top + ")" ) .attr("d", linePath(dataset)) .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke", "skyblue"); // 折线图上的圆点 svg .append("g") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("r", 6) .attr("transform", function(d) { return ( "translate(" + (xScale(d[0]) + padding.left) + "," + (yScale(d[1]) + padding.top) + ")" ); }) .attr("fill", "#CCFFFF") .transition() .duration(5000) .attr("r", 10) .attr("fill","skyblue"); }
-
效果图