D3JS可视化入门

最新推荐文章于 2025-06-08 09:02:33 发布

原创

最新推荐文章于 2025-06-08 09:02:33 发布 · 2.6w 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#可视化 #D3js

安装和配置

安装d3js

在d3js的官网上可以直接下载d3js的文件，其中包含一个完整版和mini版，差别并不是很大。调试的时候可以使用完整版，发布的时候可以使用mini版，提高加载速度

本地服务器调试

可以利用python创建本地服务器进行调试，也可以安装Apache软件进行调试。使用python进行本地调试注意：

python2.0 python -m SimpleHTTPServer 8888
python3.0 python -m Http.server 8888

基本操作

数据

加载数据

加载csv数据，可以通过d3.csv(data,function) 进行操作
加载json数据，跟上面是一样的，只需要将csv改为json就行


d3.csv('winemag-data-130k-v2.csv',function(data) {
   
   console.log(data)})
d3.json('winemag-data-130k-v2.json',function(data){
   
   console.log(data)})

绑定数据

上述操作将数组的数据和段落进行绑定

将上述代码最后一段修改，可以将传入的数据输出

SVG

条形图

绘制SVG并将数据绑定到图形上

//Width and height
var w = 500;
var h = 50;

//Data
var dataset = [ 5, 10, 15, 20, 25 ];

//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 50);

var circles = svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");

circles.attr("cx", function(d, i) {
   
   
            return (i * 50) + 25;
        })
       .attr("cy", h/2)
       .attr("r", function(d) {
   
   
            return d;
       });

绘制条形图，并且根据数组的大小和长度调整柱形图的宽度

//Width and heightvar 
w = 500;var h = 100;var dataset = [];                                                      
//Initialize empty array
for (var i = 0; i < 25; i++) {
   
                                  //Loop 25 times    var newNumber = Math.random() * 20;  //New random number (0-30)    
dataset.push(newNumber);                       //Add new number to array}
/Create SVG elementvar 
svg = d3.select("body").append("svg")            
        .attr("width", 500)           
        .attr("height", 100)
        
        var bar = svg.selectAll("rect")    
                        .data(dataset)    
                        .enter()   
                        .append("rect")    
                        .attr('x',0)   
                        .attr('y',0)    
                        .attr('height',50)    
                        .attr('width',20)
       bar.attr("x", function(d, i) {
   
              
            return (i *(w/dataset.length))       
            })       
            .attr('y',function(d) {
   
              
                return h-d*4       
                })        
            .attr('width',function(d){
   
              
                     return w/dataset.length-2       
                })      
             .attr("height", function(d) {
   
              
                return d*4;       });
                
      //加标签
      svg.selectAll('text').data(dataset)    
      .enter()    
      .append('text')   
      .text(function(d)    {
   
          
      return d    })
      .attr("x", function(d,i) {
   
    return i* (w/dataset.length)+2})
      .attr("y",function(d) {
   
   return h-(d*4)+10})   
      .attr('font-family','sans-serif')   
      .attr('font-size','11px')    .attr('fill','white')

散点图

散点图的画法实际上与前面的是一致的，只是需要更改的是circle和设置x,y以及半径

var dataset_2 = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ];
var svg2=d3.selectAll('body').append('svg')    
.attr("height",h)
.attr("width",w) 

svg2.selectAll('circle').data(dataset_2)
.enter().append('circle') 
.attr("cx", function(d) {
   
   return d[0]})
.attr("cy", function(d) {
   
   return d[1]})
.attr('r',function(d){
   
   return Math.sqrt(h-d[1])}) 

svg2.selectAll('text').data(dataset_2).enter().append('text').text(function(d) {
   
   return d[0]+','+d[1]}) 
.attr('x',function(d){
   
   return d[0]+3}) .attr('y',function(d) {
   
   return d[1]+3}) .attr('font_size','2px')

定义坐标轴

d3中的call函数会取得代码链中传递过来的元素，然后再把它交给其他函数（括号里面的函数）

//Width and height
ar w = 500;
var h = 300;
var padding = 20
;var dataset = [                                        [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],                                        [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],                                        [600, 150]                                ];
//Create scale functions
var xScale = d3.scaleLinear()                                                   .domain([0, d3.max(dataset, function(d) {
   
    return d[0]; })])                                                   
.range([padding, w - padding * 2]);

var yScale = d3.scaleLinear()                                                   .domain([0, d3.max(dataset, function(d) {
   
    return d[1]; })])                                                  
.range([h - padding, padding]);

var rScale = d3.scaleLinear()                                                   .domain([0, d3.max(dataset, function(d) {
   
    return d[1]; })])                                                   
.range([2, 5]);//Define X axis

var xAxis = d3.axisBottom()                                          .scale(xScale)                                         
.ticks(5);

var yAxis = d3.axisLeft()                                          .scale(yScale)                                         
.ticks(5);



//Create SVG element

var svg = d3.select("body")                             
.append("svg")                              
.attr("width", w)                             
.attr("height", h);

//Create circles

svg.selectAll("circle")   
.data(dataset)  
.enter()  
.append("circle")  
.attr("cx", function(d) {
   
                       return xScale(d[0]);   })   .attr("cy", function(d) {
   
                       return yScale(d[1]);   })   .attr("r", function(d) {
   
                       return rScale(d[1]);   });

//Create labels

svg.selectAll("text")  
.data(dataset)  
.enter()  
.append("text")   
.text(function(d) {
   
                       return d[0] + "," + d[1];   })   .attr("x", function(d) {
   
                       return xScale(d[0]);   })   
.attr("y", function(d) {
   
                       return yScale(d[1]);   })   .attr("font-family", "sans-serif")  
.attr("font-size", "11px")  
.attr("fill", "red")
;//Create X axis
svg.append("g")         
.attr("class", "axis")         
.attr("transform", "translate(0," + (h - padding) + ")")          
call(xAxis);

svg.append("g")          
.attr("class", "axis")          
.attr("transform", "translate("+padding+ ",0)")         
.call(yAxis);

更新视图

对于视图的更新书中所讲的是d3.v3的使用，v5的版本貌似对此有过更改，此代码只能更新数据，但是更新过程中缺少动画效果。

对于常见的更新数据主要有以下常规步骤

设置图像基本信息
生成初始数据
生成比例尺
生成坐标轴
生成绘图元素（圆或者矩阵和标签
设置监听器或者定时器
将获取数据和设置比例尺，标签部分重写一遍

//Width and height
			var w = 1000;
			var h = 300;
			var padding = 20;
		// 生成随机数
		valueNum=100
		var dataset=[]
		for (var i=0;i < 100;i++){
   
   
		    var num=Math.floor(Math.random()*100)
		    dataset.push(num)
		   }
		// 生成比例尺
		var xScale=d3.scaleOrdinal().domain(d3.range(dataset.length))
		            .range([0,w],0.05)
		var yScale=d3.scaleLinear().domain([0,d3.max(dataset)])
		            .range([h-padding,padding])

		//生成坐标轴
		var xAxis=d3.axisBottom().scale(xScale).ticks(5)
		var yAxis=d3.axisLeft().scale(yScale).ticks(5)

		//生成svg
		var svg=d3.select('body').append('svg').attr('width',w).attr('height',h)
		//生成柱形图并绑定数据
		svg.selectAll('rect').data(dataset).enter().append('rect')
		    .attr('x',function(d,i){
   
   return xScale.domain()[i]*10})
		    .attr('y',function(d) {
   
   return h-yScale(d)})
		    .attr('width',10)
		    .attr('height',function(d){
   
   return yScale(d)})
		    .attr('fill','black')
		 //生成标签
		 svg.selectAll('text').data(dataset).enter().append('text').text(function(d){
   
   return d})
		    .attr('x',function(d,i) {
   
   return xScale.domain()[i]*10+2})
		    .attr('y',function(d) {
   
   return h-yScale(d)+14})
		    .attr('font-size','8px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')

		 // 设置监听
		 d3.select('p').on('click', function(){
   
   
		    // 生成随机数
		var valueNum=100
		var dataset=[]
		for (var i=0;i<100;i++){
   
   
		    var num=Math.floor(Math.random()*100)
		    dataset.push(num)}
		 //更新比例尺
		var xScale=d3.scaleOrdinal().domain(d3.range(dataset.length))
		            .range([0,w],0.05)
		var yScale=d3.scaleLinear().domain([0,d3.max(dataset)])
		            .range([h-padding,padding])
		  // 更新数据

		svg.selectAll('rect').data(dataset).transition().duration(1000)
		.each(function(d,i){
   
   
		    d3.select(this)
		    .attr('x',xScale.domain()[i]*10)
		    .attr('y',h-yScale(d))
		    .attr('width',10)
		    .attr('height',yScale(d))
		    .attr('fill','black')
		    })
        		 svg.selectAll('text').data(dataset).enter().append('text').text(function(d){
   
   return d})
		    .attr('x',function(d,i) {
   
   return xScal