D3 數據可視化實戰筆記

時間 2020-08-25

標籤 d3 數據可視化實戰筆記简体版

原文原文鏈接

學習真是件奇妙的事情。這本書我以前都看過，有些的知識點卻徹底沒有印象。javascript

總結：把用到的知識好好研究；平時能夠了解其餘技術的基礎，把相關的資料和難點記錄下來。css

javascript陷阱java

一、變量類型
var myName = 'sfp';
typeOf myName;          //'String'
二、變量提高
for(var i=0; i<100; i++){
   //...
}
//i在for循環開始以前就有了定義
三、全局命名空間
比較好的作法：只在函數裏面聲明變量；只聲明一個全局對象。
var local_name = {}   //聲明空得全局變量，這樣的話，只會給window增長一個變量。

SVGjson

<svg width='50' height='50'>
      <circle cx='25' cy='25' r='22' fill='blue' stroke='olive' stroke-width='1' />
</svg>

須要給svg指定width，height；元素的屬性值都不帶單位數組

//基礎元素，path用於繪製複雜的圖形
<svg width='500' height='500'>
      <circle cx='25' cy='25' r='22' fill='blue' stroke='olive' stroke-width='1'></circle>
      <rect x='50' y='50' width='100' height='100'/>
      <ellipse cx='275' cy='75' rx='100' ry='25'/>
      <line x1='0' y1='200' x2='500' y2='200' stroke='red'/>
　　　 //y爲基線，注意文字不要被切掉
      <text x='0' y='220' font-size='25'>sfp</text>
</svg>

爲SVG元素添加樣式：opacityapp

比較好的作法:能夠區分svg和css的樣式dom

svg .pumpkin{
  /*...*/
}

繪製順序：數軸和數值標籤，最後加到svg中svg

爲fill，stroke指定顏色的時候使用rgba()，能夠設置透明度函數

D3學習

HTML文件中加上<meta charset='utf-8'>

d3.select(''body).append('p'): 建立一個<p>，加到<body>末尾

加載數據的最佳實踐：csv, tsv, json

var dataset;
d3.json('data.json', function(error, data){
    if(error){
        console.log(error);
    }else{
        dataset = data;
        console.log(data);
        otherfunction();
    }
});   
//在callback也能使用返回的數據
//加載文件遇到問題時，會有提示

綁定數據

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

d3.select('body')
	.selectAll('p')
　　　　　//此後全部的方法都將執行5遍
	.data(dataset)
　　　　  .enter()
	.append('p')
	.text(function(d){
		return d;
	});

attr()設置dom屬性的值；style()直接給元素添加css樣式

添加類.classed('bar', true);
刪除類.classed('bar', false);
//.attr('class', 'bar')只能添加，不能刪除，因此仍是不用這種方法了。

HTML屬性width,<img>中就有，<div>中就沒有，因此設置屬性使用attr仍是style的具體看看

在DOM中建立一個元素，都用一個變量表示，方便之後使用。

var dataset = [5, 10, 15, 20, 25];
var w = 500;
var h = 50;

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

var circles = svg.selectAll('circle')
					.data(dataset)
					.enter()
					.append('circle')
					;
circles.attr('cx', function(d, i){
			return i*50+25;
		})
	    .attr('cy', function(d, i){
	    	return h/2;
	    })
	    .attr('r', function(d, i){
	    	return d;
	    })

一個svg元素只使用一個attr()和style(), 使用多值映射的方式

比例尺：把輸入域映射爲輸出範圍

dataset = [5, 10, 15, 20, 25];

// 改成d3.scaleLinear()
var scale = d3.scale.linear();
// 定義域
scale.domain([100, 500]);
// 值域
scale.range([10, 350]);

//動態範圍
d3.max(dataset);   //25
var dataset_1 = [
		[5, 20],
		[480, 90]
	];
//二維數組
d3.max(dataset_1, function(d){
	return d[0];
})
//480
//.nice():把兩端的值擴展到最接近的整數
//.rangeRound():輸出的值舍入
//.clamp():超出範圍的值，取整到最值

數軸：生成軸線，標籤，刻度

dataset = [5, 10, 15, 20, 25];
var format = d3.format('.1%');

var svg = d3.select('body').append('svg');
svg.attr({
	width: 500,
	height:100
})

var scale = d3.scale.linear();
scale.domain([100, 500]);
scale.range([10, 350]);

// 改成axisBottom()
var axis = d3.svg.axis()
				.scale(scale)
				.orient('bottom')
　　　　　　　　　　　　　　　　　　  .tickFormat(format)
				;

svg.append('g')
	//把<g>交給axis()
	.classed('axis', true)
　　　　 //平移
　　　　 // 改成.attr('transform', 'translate(0, 50)')
	.attr({
		transform: "translate(0, 50)"
	})
	.call(axis)
	;

svg{
	margin-top:100px;
}

.axis path{
	fill:none;
	stroke:black;
	stroke-width:2px;
　　　　 //保證數軸和刻度線精確到像素級
	shape-rendering:crispEdges;
}

.axis line{
	fill:none;
	stroke:red;
	stroke-width:2px;
	shape-rendering:crispEdges;
}

.axis text{
	color:red;
}

數軸會放在<g>中，有<line><text><path>三部分組成，能夠各自設置樣式

指定刻度個數：ticks(5)

垂直數軸：orient('left')

動畫

使用序數比例尺生成條形圖：更加簡潔

var w = 600;
var h = 250;
var dataset = [5,10,15,20,25];

var svg = d3.select('body').append('svg');
svg.attr({
  width: w,
  height:h
});

var xScale = d3.scale.ordinal()
                      //d3.range(2)--[0,1]
                      .domain(d3.range(dataset.length))
                      //將值域分爲2檔，輸出值舍入，檔間距爲每檔寬度的5%
                      .rangeRoundBands([0, w], .05)
                      ;

svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')
    .attr({
      //更新,根據i返回x的位置
      x: function(d, i){
        return xScale(i);
      },
      y: function(d, i){
        return h-d*10;
      },
      //直接獲得width
      width: xScale.rangeBand(),
      height: function(d, i){
        return d*10;
      }
    })

//過渡動畫
.transition()
//延遲時間
.delay()
//持續時間
.duration(1000)
//緩動函數
.ease('linear')
//過渡開始執行的操縱
.each('start', function(){
　　d3.select(this)
　　　　.attr('', '')
　　　　;
})
.attr({})
//過渡結束執行的操做
.each('end', function(){
　　...
})
;

9.3.7 剪切路徑？

忽略鼠標事件：pointer-events：none

排序

d3.selectAll('rect')
  .sort(function(a, b){
    return d3.ascending(a, b);
  })

提示條

.on('mouseover', function(d){
      console.log(d3.select(this).attr('x'));
})

以上有些修改，是由於以前使用的是V3，如今換爲V4了。　

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

D3 數據可視化實戰 筆記

D3 數據可視化實戰筆記