D3JS可视化入门

最新推荐文章于 2024-09-29 20:55:25 发布
最新推荐文章于 2024-09-29 20:55:25 发布
阅读量2.6w 收藏 45
点赞数 4
分类专栏： 可视化 文章标签： 可视化 D3js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Peter_Luoz/article/details/89213575
版权

文章目录

安装和配置

安装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)})

绑定数据

b326a19f9b0d58bac1377e8b55c29c4b.png
上述操作将数组的数据和段落进行绑定
591deb049f246e1f5dd2c2b8089e1824.png

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

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

a6b566767c76e8717d829d2910a48549.png

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

//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')

cc1907a12d42d36fcc1f53085fc46a9e.png

散点图

散点图的画法实际上与前面的是一致的，只是需要更改的是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')

15690af663b2b0b83862212ce1b4a107.png

定义坐标轴

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

1fdddc56180b932c24d26b9be4a32fd6.png

更新视图

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

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

  1. 设置图像基本信息
  2. 生成初始数据
  3. 生成比例尺
  4. 生成坐标轴
  5. 生成绘图元素（圆或者矩阵和标签
  6. 设置监听器或者定时器
  7. 将获取数据和设置比例尺，标签部分重写一遍
//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 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')
		   })

增加数据

在这个过程中需要注意的是设置新增加的那个数据的位置，已经设置总体更新的过渡函数。注意选择器的使用，不要用错了主体，从而导致新增的数据无法显示

这个方法虽然能够更新数据，但是在删除的时候会出现数据与标签对不上的问题，因此在更新数据时，更应该尝试使用键值对（字典）的形式来绑定数据

//生成数据
    var dataset=[]
    var maxvalue=25
	for (var i=0;i < maxvalue;i++){
		    var num=Math.floor(Math.random()*maxvalue)
		    dataset.push(num)
		   }

    //宽高
    var w = 1000;
    var h = 300;
    var padding = 20;
   //生成比例尺
    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
		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]*(w/dataset.length)})
		    .attr('y',function(d) {return h-yScale(d)})
		    .attr('width',w/dataset.length-2)
		    .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]*(w/dataset.length)+(w/dataset.length)/2})
		    .attr('y',function(d) {return h-yScale(d)+20})
		    .attr('font-size','10px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')

      //增加数据
      d3.select('p').on('click',function(){
            var num=Math.floor(Math.random()*maxvalue)
		    dataset.push(num)
		   xScale.domain(d3.range(dataset.length))
		   yScale.domain([0,d3.max(dataset)])


           var bars=svg.selectAll('rect').data(dataset)

           bars.enter().append('rect').attr('x',w-(w/dataset.length)).attr('y',function(d){return h-yScale(d)}).attr('width',(w/dataset.length)-2).attr('height',function(d){return yScale(d)})
           .attr('fill','black')

           bars.transition().duration(1000).attr('x',function(d,i){return  xScale.domain()[i]*(w/dataset.length)})
		    .attr('y',function(d) {return h-yScale(d)})
		    .attr('width',w/dataset.length-2)
		    .attr('height',function(d){return yScale(d)})
		    .attr('fill','black')
        var text=svg.selectAll('text').data(dataset)
        text.enter().append('text').text(function(d){return d})
		    .attr('x',w-(w/dataset.length))
		    .attr('y',function(d){return h-yScale(d)+20})
		    .attr('font-size','12px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')


		 text.transition().duration(1000).attr('x',function(d,i) {return  xScale.domain()[i]*(w/dataset.length)+(w/dataset.length)/2})
		    .attr('y',function(d) {return h-yScale(d)})
		    .attr('font-size','10px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')
 //删除数据
      d3.select('#delete').on('click',function(){
            dataset.shift()
            xScale.domain(d3.range(dataset.length))
		   yScale.domain([0,d3.max(dataset)])


           var bars=svg.selectAll('rect').data(dataset)

           bars.enter().append('rect').attr('x',w-(w/dataset.length)).attr('y',function(d){return h-yScale(d)}).attr('width',(w/dataset.length)-2).attr('height',function(d){return yScale(d)})
           .attr('fill','black')

           bars.transition().duration(1000).attr('x',function(d,i){return  xScale.domain()[i]*(w/dataset.length)})
		    .attr('y',function(d) {return h-yScale(d)})
		    .attr('width',w/dataset.length-2)
		    .attr('height',function(d){return yScale(d)})
		    .attr('fill','black')

		 bars.exit().transition().duration(1000).attr('x',w-(w/dataset.length)).remove()
        var text=svg.selectAll('text').data(dataset)
        text.enter().append('text').text(function(d){return d})
		    .attr('x',w-(w/dataset.length))
		    .attr('y',function(d){return h-yScale(d)+20})
		    .attr('font-size','12px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')


		 text.transition().duration(1000).attr('x',function(d,i) {return  xScale.domain()[i]*(w/dataset.length)+(w/dataset.length)/2})
		    .attr('y',function(d) {return h-yScale(d)})
		    .attr('font-size','10px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')
         text.exit().transition().duration(1000).attr('x',w-(w/dataset.length)/2).remove()
      })

字典绑定

这里可能是版本的问题，代码运行还是会存在一些问题：

  • 增加值标签不会出现问题，但是在删除值时，标签数据不会同步更新
  • 增加再删除，会出现新增加的标签直接偏移到最左边
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Adding and removing values from a chart (dynamic labels included)</title>
		 <script src="d3/d3.min.js"></script>
		<style type="text/css">
			/* No style rules here yet */
		</style>
	</head>
	<body>

		<p id="add">Add a new data value</p>
		<p id="remove">Remove a data value</p>

		<script type="text/javascript">

			//Width and height
			var w = 600;
			var h = 250;

			var dataset = [ { key: 0, value: 5 },		//dataset is now an array of objects.
							{ key: 1, value: 10 },		//Each object has a 'key' and a 'value'.
							{ key: 2, value: 13 },
							{ key: 3, value: 19 },
							{ key: 4, value: 21 },
							{ key: 5, value: 25 },
							{ key: 6, value: 22 },
							{ key: 7, value: 18 },
							{ key: 8, value: 15 },
							{ key: 9, value: 13 },
							{ key: 10, value: 11 },
							{ key: 11, value: 12 },
							{ key: 12, value: 15 },
							{ key: 13, value: 20 },
							{ key: 14, value: 18 },
							{ key: 15, value: 17 },
							{ key: 16, value: 16 },
							{ key: 17, value: 18 },
							{ key: 18, value: 23 },
							{ key: 19, value: 25 } ];

			var xScale = d3.scaleOrdinal()
							.domain(d3.range(dataset.length))
							.range([0, w], 0.05);

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

			//Define key function, to be used when binding data
			var key = function(d) {
				return d.key;
			};

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

			//Create bars
			svg.selectAll("rect")
			   .data(dataset, key)
			   .enter()
			   .append("rect")
			   .attr("x", function(d, i) {
			   		return  xScale.domain()[i]*(w/dataset.length);
			   })
			   .attr("y", function(d) {
			   		return h - yScale(d.value);
			   })
			   .attr("width", (w/dataset.length)-2)
			   .attr("height", function(d) {
			   		return yScale(d.value);
			   })
			   .attr("fill", function(d) {
					return "rgb(0, 0, " + (d.value * 10) + ")";
			   });

			//Create labels
			svg.selectAll("text")
			   .data(dataset, key)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d.value;
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return  xScale.domain()[i]*(w/dataset.length)+(w/dataset.length)/2;
			   })
			   .attr("y", function(d) {
			   		return h - yScale(d.value) + 14;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "red");




			//On click, update with new data
			d3.selectAll("p")
				.on("click", function() {

					//See which p was clicked
					var paragraphID = d3.select(this).attr("id");

					//Decide what to do next
					if (paragraphID == "add") {
						//Add a data value
						var maxValue = 25;
						var newNumber = Math.floor(Math.random() * maxValue);
						var lastKeyValue = dataset[dataset.length - 1].key;
						console.log(lastKeyValue);
						dataset.push({
							key: lastKeyValue + 1,
							value: newNumber
						});
					} else {
						//Remove a value
						dataset.shift();	//Remove one value from dataset
					}

					//Update scale domains
					xScale.domain(d3.range(dataset.length));
					yScale.domain([0, d3.max(dataset, function(d) { return d.value; })]);

					//Select…
					var bars = svg.selectAll("rect")
						.data(dataset, key);

					//Enter…
					bars.enter()
						.append("rect")
						.attr("x", w)
						.attr("y", function(d) {
							return h - yScale(d.value);
						})
						.attr("width", (w/dataset.length)-2)
						.attr("height", function(d) {
							return yScale(d.value);
						})
						.attr("fill", function(d) {
							return "rgb(0, 0, " + (d.value * 10) + ")";
						});

					//Update…
					bars.transition()
						.duration(500)
						.attr("x", function(d, i) {
							return xScale.domain()[i]*(w/dataset.length)+(w/dataset.length);
						})
						.attr("y", function(d) {
							return h - yScale(d.value);
						})
						.attr("width", (w/dataset.length))
						.attr("height", function(d) {
							return yScale(d.value);
						});

					//Exit…
					bars.exit()
						.transition()
						.duration(500)
						.attr("x", -(w/dataset.length))
						.remove();



					//Update all labels

					//Select…
					var labels = svg.selectAll("text")
						.data(dataset, key);

					//Enter…
					<!--labels.enter()-->
						<!--.append("text")-->
						<!--.text(function(d) {-->
							<!--return d.value;-->
						<!--})-->
						<!--.attr("text-anchor", "middle")-->
						<!--.attr("x", w)-->
						<!--.attr("y", function(d) {-->
							<!--return h - yScale(d.value) + 14;-->
						<!--})-->
					   <!--.attr("font-family", "sans-serif")-->
					   <!--.attr("font-size", "11px")-->
					   <!--.attr("fill", "black");-->

					<!--//Update…-->
					<!--labels.transition()-->
						<!--.duration(500)-->
						<!--.attr("x", function(d, i) {-->
							<!--return xScale.domain()[i]+ (w/dataset.length) / 2;-->
						<!--});-->
labels.enter().append('text').text(function(d){return d.value})
		    .attr('x',w)
		    .attr('y',function(d){return h-yScale(d.value)+20})
		    .attr('font-size','12px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')


		 labels.transition().duration(1000).attr('x',function(d,i) {return  xScale.domain()[i+1]*(w/dataset.length)+(w/dataset.length)/2})
        labels.exit().transition().duration(1000).attr('x',-(w/dataset.length)/2).remove()
					<!--//Exit…-->
					<!--labels.exit()-->
						<!--.transition()-->
						<!--.duration(500)-->
						<!--.attr("x", -(w/dataset.length))-->
						<!--.remove();-->

				});


		</script>
	</body>
</html>

事件监听

  • 使用CSS实现悬停高亮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间监听</title>
    <script src="d3/d3.min.js"></script>
    <style type="text/css">

			rect:hover {
				fill: orange;
			}

		</style>
</head>
<body>
<script type="text/javascript">

    var w = 1000;
    var h = 300;
    padding = 10
var dataset = [ { key: 0, value: 5 },		//dataset is now an array of objects.
							{ key: 1, value: 10 },		//Each object has a 'key' and a 'value'.
							{ key: 2, value: 13 },
							{ key: 3, value: 19 },
							{ key: 4, value: 21 },
							{ key: 5, value: 25 },
							{ key: 6, value: 22 },
							{ key: 7, value: 18 },
							{ key: 8, value: 15 },
							{ key: 9, value: 13 },
							{ key: 10, value: 11 },
							{ key: 11, value: 12 },
							{ key: 12, value: 15 },
							{ key: 13, value: 20 },
							{ key: 14, value: 18 },
							{ key: 15, value: 17 },
							{ key: 16, value: 16 },
							{ key: 17, value: 18 },
							{ key: 18, value: 23 },
							{ key: 19, value: 25 } ];
     var key=function(d){return d.key}
    //定义比例尺
    var xScale=d3.scaleOrdinal().domain(d3.range(dataset.length))
                .range([0,w],0.05)
     var yScale=d3.scaleLinear().domain([0,d3.max(dataset,function(d){return d.value})])
                .range([0,h])

     //生成svg
		var svg=d3.select('body').append('svg').attr('width',w).attr('height',h)
		//生成柱形图并绑定数据
		svg.selectAll('rect').data(dataset,key).enter().append('rect')
		    .attr('x',function(d,i){return  xScale.domain()[i]*(w/dataset.length)})
		    .attr('y',function(d) {return h-yScale(d.value)})
		    .attr('width',w/dataset.length-2)
		    .attr('height',function(d){return yScale(d.value)})
		    .attr('fill','black')
		 //生成标签
		svg.selectAll('text').data(dataset,key).enter().append('text').text(function(d){return d.value})
		    .attr('x',function(d,i) {return  xScale.domain()[i]*(w/dataset.length)+(w/dataset.length)/2})
		    .attr('y',function(d) {return h-yScale(d.value)+20})
		    .attr('font-size','10px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')
</script>
</body>
</html>
  • 使用d3实现悬停高亮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>d3悬停</title>
    <script src="d3/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">

    var w = 1000;
    var h = 300;
    padding = 10
var dataset = [ { key: 0, value: 5 },		//dataset is now an array of objects.
							{ key: 1, value: 10 },		//Each object has a 'key' and a 'value'.
							{ key: 2, value: 13 },
							{ key: 3, value: 19 },
							{ key: 4, value: 21 },
							{ key: 5, value: 25 },
							{ key: 6, value: 22 },
							{ key: 7, value: 18 },
							{ key: 8, value: 15 },
							{ key: 9, value: 13 },
							{ key: 10, value: 11 },
							{ key: 11, value: 12 },
							{ key: 12, value: 15 },
							{ key: 13, value: 20 },
							{ key: 14, value: 18 },
							{ key: 15, value: 17 },
							{ key: 16, value: 16 },
							{ key: 17, value: 18 },
							{ key: 18, value: 23 },
							{ key: 19, value: 25 } ];
     var key=function(d){return d.key}
    //定义比例尺
    var xScale=d3.scaleOrdinal().domain(d3.range(dataset.length))
                .range([0,w],0.05)
     var yScale=d3.scaleLinear().domain([0,d3.max(dataset,function(d){return d.value})])
                .range([0,h])

     //生成svg
		var svg=d3.select('body').append('svg').attr('width',w).attr('height',h)
		//生成柱形图并绑定数据
		svg.selectAll('rect').data(dataset,key).enter().append('rect')
		    .attr('x',function(d,i){return  xScale.domain()[i]*(w/dataset.length)})
		    .attr('y',function(d) {return h-yScale(d.value)})
		    .attr('width',w/dataset.length-2)
		    .attr('height',function(d){return yScale(d.value)})
		    .attr('fill','#81D4FA').on('mouseover',function(){return d3.select(this).attr('fill','#FF9100')})
        .on('mouseout',function(d){return d3.select(this).transition().duration(1000).attr('fill','#81D4FA')})
		 //生成标签
		svg.selectAll('text').data(dataset,key).enter().append('text').text(function(d){return d.value})
		    .attr('x',function(d,i) {return  xScale.domain()[i]*(w/dataset.length)+(w/dataset.length)/2})
		    .attr('y',function(d) {return h-yScale(d.value)+20})
		    .attr('font-size','10px')
		    .attr('font-family','san-serif')
		    .attr('fill','white')

</script>
</body>
</html>

自动排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动排序</title>
    <script src="d3/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
    //生成数据
    var dataset=[]
    var maxvalue=25
	for (var i=0;i < maxvalue;i++){
		    var num=Math.floor(Math.random()*maxvalue)
		    dataset.push(num)
		   }

    //宽高
    var w = 1000;
    var h = 300;
    var padding = 20;
   //生成比例尺
    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
		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]*(w/dataset.length)})
		    .attr('y',function(d) {return yScale(d)})
		    .attr('width',w/dataset.length-2)
		    .attr('height',function(d){return h-yScale(d)})
		    .attr('fill','#81D4FA')
		    .on('mouseover',function(){return d3.select(this).attr('fill','#FF9100')})
            .on('mouseout',function(d){return d3.select(this).transition().duration(1000).attr('fill','#81D4FA')})
            .on('click',function(){return sortby(),sortbytext()})
		 //生成标签
		svg.selectAll('text').data(dataset).enter().append('text').text(function(d){return d})
		    .attr('x',function(d,i) {return  xScale.domain()[i]*(w/dataset.length)+(w/dataset.length)/2})
		    .attr('y',function(d) {return yScale(d)+20})
		    .attr('font-size','10px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')
        var sortby=function(){
        svg.selectAll('rect').sort(function(a,b){return d3.ascending(a,b)}).transition().duration(1000).attr('x',function(d,i){return xScale.domain()[i]*(w/dataset.length)})}
        var sortbytext=function(){
        svg.selectAll('text').sort(function(a,b){return d3.ascending(a,b)}).transition().duration(1000).attr('x',function(d,i){return xScale.domain()[i]*(w/dataset.length)})}
</script>
</body>
</html>

提示条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div提示框</title>
    <script src="d3/d3.min.js"></script>
    <style type="text/css">

			rect:hover {
				fill: orange;
			}

			#tooltip {
				position: absolute;
				width: 200px;
				height: auto;
				padding: 10px;
				background-color: white;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}

			#tooltip.hidden {
				display: none;
			}

			#tooltip p {
				margin: 0;
				font-family: sans-serif;
				font-size: 16px;
				line-height: 20px;
			}
	</style>

</head>
<body>
		<div id="tooltip" class="hidden">
			<p><strong>Important Label Heading</strong></p>
			<p><span id="value">100</p>
		</div>
    <script type="text/javascript">
    //生成数据
    var dataset=[]
    var maxvalue=25
	for (var i=0;i < maxvalue;i++){
		    var num=Math.floor(Math.random()*maxvalue)
		    dataset.push(num)
		   }

    //宽高
    var w = 1000;
    var h = 300;
    var padding = 20;
   //生成比例尺
    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
		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]*(w/dataset.length)})
		    .attr('y',function(d) {return yScale(d)})
		    .attr('width',w/dataset.length-2)
		    .attr('height',function(d){return h-yScale(d)})
		    .attr('fill','#81D4FA')
		    .on('mouseover',function(d){
		    var xPosition = parseFloat(d3.select(this).attr("x")) + (w/dataset.length) / 2;
					var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

					//Update the tooltip position and value
					d3.select("#tooltip")
						.style("left", xPosition + "px")
						.style("top", yPosition + "px")
						.select("#value")
						.text(d);

					//Show the tooltip
					d3.select("#tooltip").classed("hidden", false);
		    return d3.select(this).attr('fill','#FF9100')})
            .on('mouseout',function(d){
            d3.select("#tooltip").classed("hidden", true);
            return d3.select(this).transition().duration(1000).attr('fill','#81D4FA')})
            .on('click',function(){return sortby(),sortbytext()}).append('title').text(function(d){return d})
		 //生成标签
		svg.selectAll('text').data(dataset).enter().append('text').text(function(d){return d})
		    .attr('x',function(d,i) {return  xScale.domain()[i]*(w/dataset.length)+(w/dataset.length)/2})
		    .attr('y',function(d) {return yScale(d)+20})
		    .attr('font-size','10px')
		    .attr('font-family','san-serif')
		    .attr('fill','red')
        var sortby=function(){
        svg.selectAll('rect').sort(function(a,b){return d3.ascending(a,b)}).transition().duration(1000).attr('x',function(d,i){return xScale.domain()[i]*(w/dataset.length)})}
        var sortbytext=function(){
        svg.selectAll('text').sort(function(a,b){return d3.ascending(a,b)}).transition().duration(1000).attr('x',function(d,i){return xScale.domain()[i]*(w/dataset.length)})}
</script>
</body>
</html>

布局

D3的全部布局方法如下：

  • Bundle：把霍尔顿(Holten)的分层捆绑算法应用到连线（edge）上
  • Chord： 根据矩阵关系生成弦形图（chord diagram）
  • Cluster：聚集实体生成系统树图（dendrogram）
  • Force ：根据物理模拟链接定位的节点
  • Hierarchy ：派生自定义的系统（分层的）布局实现
  • Histogram：基于量化的分组计算数据分布
  • Pack：基于递归圆形填充（circle packing）产生分层布局
  • Partition：递归细分节点树，呈射线或冰挂状
  • Pie：计算饼图或圆环图中弧形的起止角度
  • Stack：计算一系列堆叠的条形或者面积图的基线
  • Tree ： 整齐的定位树节点
  • Treemap：基于递归空间细分来显示节点树

饼图

  1. 建立pie布局
  2. 创建svg并传入pie给g元组
  3. 设置内外圆半径
  4. 绘制路径
  5. 绘制文本标签
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Pie layout</title>
		<script type="text/javascript" src="../d3/d3.v3.js"></script>
		<style type="text/css">

			text {
				font-family: sans-serif;
				font-size: 12px;
				fill: white;
			}

		</style>
	</head>
	<body>
		<script type="text/javascript">

			//Width and height
			var w = 300;
			var h = 300;

			var dataset = [ 5, 10, 20, 45, 6, 25 ];

			var outerRadius = w / 2;
			var innerRadius = 0;
			var arc = d3.svg.arc()
							.innerRadius(innerRadius)
							.outerRadius(outerRadius);
			
			var pie = d3.layout.pie();
			
			//Easy colors accessible via a 10-step ordinal scale
			var color = d3.scale.category10();

			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
			
			//Set up groups
			var arcs = svg.selectAll("g.arc")
						  .data(pie(dataset))
						  .enter()
						  .append("g")
						  .attr("class", "arc")
						  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
			
			//Draw arc paths
			arcs.append("path")
			    .attr("fill", function(d, i) {
			    	return color(i);
			    })
			    .attr("d", arc);
			
			//Labels
			arcs.append("text")
			    .attr("transform", function(d) {
			    	return "translate(" + arc.centroid(d) + ")";
			    })
			    .attr("text-anchor", "middle")
			    .text(function(d) {
			    	return d.value;
			    });
						
		</script>
	</body>
</html>

168a9ca3ec27c0ff34c51b811084ffa2.png

堆叠柱状图

  1. 创建stack布局
  2. 计算堆叠
  3. 设置高度与基准值
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Stack layout stacked bar chart</title>
		<script type="text/javascript" src="../d3/d3.v3.js"></script>
		<style type="text/css">
			/* No style rules here yet */
		</style>
	</head>
	<body>
		<script type="text/javascript">

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

			//Original data
			var dataset = [
				[
					{ x: 0, y: 5 },
					{ x: 1, y: 4 },
					{ x: 2, y: 2 },
					{ x: 3, y: 7 },
					{ x: 4, y: 23 }
				],
				[
					{ x: 0, y: 10 },
					{ x: 1, y: 12 },
					{ x: 2, y: 19 },
					{ x: 3, y: 23 },
					{ x: 4, y: 17 }
				],
				[
					{ x: 0, y: 22 },
					{ x: 1, y: 28 },
					{ x: 2, y: 32 },
					{ x: 3, y: 35 },
					{ x: 4, y: 43 }
				]
			];

			//Set up stack method
			var stack = d3.layout.stack();

			//Data, stacked
			stack(dataset);

			//Set up scales
			var xScale = d3.scale.ordinal()
				.domain(d3.range(dataset[0].length))
				.rangeRoundBands([0, w], 0.05);
		
			var yScale = d3.scale.linear()
				.domain([0,				
					d3.max(dataset, function(d) {
						return d3.max(d, function(d) {
							return d.y0 + d.y;
						});
					})
				])
				.range([0, h]);
				
			//Easy colors accessible via a 10-step ordinal scale
			var colors = d3.scale.category10();
		
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
	
			// Add a group for each row of data
			var groups = svg.selectAll("g")
				.data(dataset)
				.enter()
				.append("g")
				.style("fill", function(d, i) {
					return colors(i);
				});
	
			// Add a rect for each data value
			var rects = groups.selectAll("rect")
				.data(function(d) { return d; })
				.enter()
				.append("rect")
				.attr("x", function(d, i) {
					return xScale(i);
				})
				.attr("y", function(d) {
					return yScale(d.y0);
				})
				.attr("height", function(d) {
					return yScale(d.y);
				})
				.attr("width", xScale.rangeBand());
						
		</script>
	</body>
</html>

7f70683ed64746c661606f6966a86336.png

力图

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Force layout</title>
		<script type="text/javascript" src="../d3/d3.v3.js"></script>
		<style type="text/css">
			/* No style rules here yet */
		</style>
	</head>
	<body>
		<script type="text/javascript">

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

			//Original data
			var dataset = {
				nodes: [
					{ name: "Adam" },
					{ name: "Bob" },
					{ name: "Carrie" },
					{ name: "Donovan" },
					{ name: "Edward" },
					{ name: "Felicity" },
					{ name: "George" },
					{ name: "Hannah" },
					{ name: "Iris" },
					{ name: "Jerry" }
				],
				edges: [
					{ source: 0, target: 1 },
					{ source: 0, target: 2 },
					{ source: 0, target: 3 },
					{ source: 0, target: 4 },
					{ source: 1, target: 5 },
					{ source: 2, target: 5 },
					{ source: 2, target: 5 },
					{ source: 3, target: 4 },
					{ source: 5, target: 8 },
					{ source: 5, target: 9 },
					{ source: 6, target: 7 },
					{ source: 7, target: 8 },
					{ source: 8, target: 9 }
				]
			};

			//Initialize a default force layout, using the nodes and edges in dataset
			var force = d3.layout.force()
								 .nodes(dataset.nodes)
								 .links(dataset.edges)
								 .size([w, h])
								 .linkDistance([50])
								 .charge([-100])
								 .start();

			var colors = d3.scale.category10();

			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
			
			//Create edges as lines
			var edges = svg.selectAll("line")
				.data(dataset.edges)
				.enter()
				.append("line")
				.style("stroke", "#ccc")
				.style("stroke-width", 1);
			
			//Create nodes as circles
			var nodes = svg.selectAll("circle")
				.data(dataset.nodes)
				.enter()
				.append("circle")
				.attr("r", 10)
				.style("fill", function(d, i) {
					return colors(i);
				})
				.call(force.drag);
			
			//Every time the simulation "ticks", this will be called
			force.on("tick", function() {

				edges.attr("x1", function(d) { return d.source.x; })
					 .attr("y1", function(d) { return d.source.y; })
					 .attr("x2", function(d) { return d.target.x; })
					 .attr("y2", function(d) { return d.target.y; });
			
				nodes.attr("cx", function(d) { return d.x; })
					 .attr("cy", function(d) { return d.y; });
	
			});


		</script>
	</body>
</html>

c52ab746ede185191e299a9fedbf2e6a.png

地图


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Setting path fills dynamically to generate a choropleth</title>
		<script type="text/javascript" src="../d3/d3.v3.js"></script>
		<style type="text/css">
			/* No style rules here yet */		
		</style>
	</head>
	<body>
		<script type="text/javascript">

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

			//Define map projection
			var projection = d3.geo.albersUsa()
								   .translate([w/2, h/2])
								   .scale([500]);

			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);
							 
			//Define quantize scale to sort data values into buckets of color
			var color = d3.scale.quantize()
								.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
								//Colors taken from colorbrewer.js, included in the D3 download

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

			//Load in agriculture data
			d3.csv("us-ag-productivity-2004.csv", function(data) {

				//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return d.value; }), 
					d3.max(data, function(d) { return d.value; })
				]);

				//Load in GeoJSON data
				d3.json("us-states.json", function(json) {

					//Merge the ag. data and GeoJSON
					//Loop through once for each ag. data value
					for (var i = 0; i < data.length; i++) {
				
						//Grab state name
						var dataState = data[i].state;
						
						//Grab data value, and convert from string to float
						var dataValue = parseFloat(data[i].value);
				
						//Find the corresponding state inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {
						
							var jsonState = json.features[j].properties.name;
				
							if (dataState == jsonState) {
						
								//Copy the data value into the JSON
								json.features[j].properties.value = dataValue;
								
								//Stop looking through the JSON
								break;
								
							}
						}		
					}

					//Bind data and create one path per GeoJSON feature
					svg.selectAll("path")
					   .data(json.features)
					   .enter()
					   .append("path")
					   .attr("d", path)
					   .style("fill", function(d) {
					   		//Get data value
					   		var value = d.properties.value;
					   		
					   		if (value) {
					   			//If value exists…
						   		return color(value);
					   		} else {
					   			//If value is undefined…
						   		return "#ccc";
					   		}
					   });
			
				});
			
			});
			
		</script>
	</body>
</html>

$
\frac{\partial C}{\partial \theta} 
&=& 
\frac{1}{m} \sum_{i=1}^m 
\left[ \sigma\left(\theta^{\rm T} x^{(i)} \right) - y^{(i)} \right]
x^{(i)}\\
&=&
\frac{1}{m} 
X^{\rm T}
\left[ \sigma\left(X \theta \right) - y \right]
$
【项目实战】一个用于网页作图、生成互动图形的JavaScript数据可视化库（D3.js） 入门介绍
本本本添哥
08-09 94
D3.js的目标用户主要是前端开发者、数据分析师和设计师，他们需要创建复杂的数据可视化图表，且愿意投入时间和精力进行深度定制。
D3JS组件包，提供可视化数据处理
11-20
D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。如果你不知道什么是 JavaScript ，请先学习一下 JavaScript
使用JavaScript和D3.js实现数据可视化
weixin_33720452的博客
08-10 286
欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生 发表于云+社区专栏 介绍 D3.js是一个JavaScript库。它的全称是Data-Driven Documents（数据驱动文档），并且它被称为一个互动和动态的数据可视化库网络。2011年2月首次发布，在撰写本文时，最新的稳定版本是4.4版本，并且不断更新。D3利用可缩放矢量图形或SVG格式，允许您渲染可放大或缩...
d3.js 基础学习
最新发布
w530763509的博客
09-29 977
/数据//定义线性比例尺//定义坐标轴.axisBottom(xScale) //定义一个axis并指定刻度的方向为bottom（朝下）且指定比例尺为xScale.ticks(7);//指定刻度的数量。
使用D3.js进行数据可视化
m0_73500130的博客
05-03 2940
D3.js是一个流行的JavaScript数据可视化库，全称为Data-Driven Documents，即数据驱动文档。它以数据为核心，通过数据来驱动文档的展示和操作。D3.js提供了丰富的API和工具，使得开发者能够创建出各种交互式和动态的数据可视化效果。
d3js的数据可视化
qq_43508272的博客
08-30 1876
数据可视化：柱状图、二叉树、饼图、力导向、词云图的实现1. js绘制SVG直方图实现方法2.分形二叉树实现方法3.文字二叉树实现方法4.D3概述&直方图实现方法==总代码==5.D3布局 饼图&环图&玫瑰图&交互实现方法7.JSP链接数据库并可视化实现方法8.力导向图实现方法 1. js绘制SVG直方图 实现方法 获取屏幕分辨率&浏览器可用宽度 <p id="demo"></p> <script> var w=window.inn
D3js 可视化 优雅制作简单条形图 pop2010
陈杉菜
04-03 513
人外有人山外有山 条形图外有条形图 之前讲了完完全全没有涉及到js的条形图 讲了没有用到除了0以外数字的条形图 可 还是 没有 优雅发挥D3的所有功能 于是，接着修改原来的条形图 GO GO GO 对比图（左边是原来的，右边是优雅系列嘻嘻嘻） 表面上看差不太多 实际上 内心已经收到升华变得优雅了ohhahah JUST　DO　IT ———————— ！注意 ｃａｌｌ ｒａｎｇｅＢａｎｄ　和　ｒ...
精通D3.js：交互式数据可视化高级编程
08-10
本书《精通D3.js：交互式数据可视化高级编程》系统地介绍了D3.js的所有重要知识点，从基础入门到深入内容都有详细讲解，适合希望提高数据可视化能力的读者。 在介绍D3.js之前，首先需要了解Web标准技术的基础，包括...
treemap:TreeMap D3 可视化
06-28
树形图可视化 描述 树状图可视化用于描绘层次结构。 它使用矩形、空间填充的切片和切块技术来可视化层次结构中不同级别的对象。 入门 使用以下命令安装模块： npm install treemap var treemap = require ( '...
D3.js数据可视化实战手册.epub
01-30
它涵盖了一些基本概念，诸如D3.js是什么，以及如何搭建一个适用于D3.js数据可视化程序的开发环境等。 第 2章，精挑细选，向你介绍了D3数字可视化中最基本的一项操作——选集。选集可以帮助读者定位页面上的元素。 第...
数据可视化入门：使用D3.js的力量
D3，全称为 Data-Driven Documents，是一种强大的JavaScript库，用于创建动态、交互式的数据可视化。这本书主要面向那些需要将数据转化为可决策信息的专业人士，无论他们是初创公司还是世界500强企业，都能通过数据...
StreamlineD3为开发人员提供一种创建动态D3js可视化与实时数据的简单方法
08-10
StreamlineD3 为开发人员提供一种创建动态D3.js可视化与实时数据的简单方法
d3-relationshipgraph, 使用d3js可视化父对象关系的框架.zip
09-17
d3-relationshipgraph, 使用d3js可视化父对象关系的框架 d3-relationshipgraph 用于创建 D3.js的父级子关系的框架。示例在这里查看一个工作示例 。如果你已经使用 d3-relationshipgraph，可以编辑这个自述文件并为你的示例添加一个链接和图
D3 可视化效果
11-26
D3是这样一个特殊的JavaScript库，它利用现有的Web标准，通过更简单的（数据驱动）方式来制作炫目的可视化效果
JavaScript数据可视化编程
02-05
使用JavaScript实现不同常规的可视化 使用FLOTR2进行 数据可视化 编程
JavaScript数据可视化编程.emmx
03-07
JavaScript数据可视化编程的章节和实例的大纲
【 D3.js 入门系列 --- 9 】 常见可视化图形
热门推荐
十二月咖啡馆工作室
07-13 1万+
Layout 是 D3 中 “制作常见图形的函数”，用 Layout 可以轻松地对输入数据进行转换，使得它能容易地适应可视化图形使用的需要。
前端数据可视化：利用D3.js创建动态图表
Sun_blog
06-29 1761
数据可视化是将数据以图表、图形等形式展示出来，以便更直观地理解和分析数据。D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建交互式和动态的数据可视化。本文将介绍如何使用D3.js创建动态图表，并通过一个具体的示例来说明。通过使用D3.js，我们可以轻松地创建动态图表，使数据更加直观和易于理解。在本文中，我们以柱状图为例，展示了如何使用D3.js创建动态图表，并通过代码示例进行了说明。希望本文能帮助你更好地理解和应用D3.js进行前端数据可视化。
D3.js实战：数据可视化的前端艺术
sybh的博客
07-28 313
D3.js是由Mike Bostock创建的开源JavaScript库，它提供了强大的数据操作和DOM操作功能，以及丰富的图形绘制方法。D3.js的核心理念是“数据驱动文档”，即使用数据来操作文档对象模型（DOM），将数据和DOM元素绑定，从而实现动态更新和交互。D3.js不依赖于特定的图表类型，而是提供了灵活的API，使开发者可以根据需求自由组合和定制图表效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值