从hello world程序入手学习D3

学编程入门的第一个程序都是在屏幕上输出 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()示例

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");
 }

效果图

smile@qingqing

发布了93 篇原创文章 · 获赞 60 · 访问量 3万+

私信关注