d3 base api
TIP
关于d3
基础常用api
介绍
select、selectAll
TIP
类似于javascript的document.querySelector();
document.querySelectorAll();
支持class
、id
、标签
进行元素选中
- 用法:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" class='main'>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
</div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//select
//第一种Id选中
const main1 = d3.select('#main');
console.log(main1,'main1');
//第二种class
const main2 = d3.select('.main');
console.log(main2,'main2');
//第三种标签
const main3 = d3.select('body > div');
console.log(main3,'main3');
//selectAll同select支持id、class、标签选中多个
const pAll1 = d3.selectAll('#main > .item');
console.log(pAll1 ,'pAll1');
const pAll2 = d3.selectAll('#main > p');
console.log(pAll2 ,'pAll2');
</script>
TIP
是不是看了后觉得很方便,不要急还没展示d3Js的真正魅力
attr
TIP
attr
方法是给元素添加属性类似于javascript
的attributes()
用法:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main">
<svg>
<rect></rect>
</svg>
</div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// attr
//添加一个class 名
d3.select('#main')
.attr('class', 'd3-main');
//给svg定义容器的width、height
d3.select('svg')
.attr('width', 500)
.attr('height', 500)
//给rect 添加一些属性
d3.select('rect')
.attr('width', 100)
.attr('height', 100)
.attr('fill', red)
.attr('x', 10)
.attr('y', 10)
.attr('stroke', 'blue')
</script>
展示效果:
append
TIP
大家可以看出来我上面的svg、rect都是再html上添加好 然后用attr添加属性的。其实不用先定义好 append
帮咱们创建元素并插入dom
- 用法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// append
const svg = d3.select('#main')
.append('svg')
.attr('width', 500)
.attr('height', 500);
//append一个rect 添加一些属性
svg.append('rect')
.attr('width', 100)
.attr('height', 100)
.attr('fill', red)
.attr('x', 10)
.attr('y', 10)
.attr('stroke', 'blue')
</script>
- 效果
style
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main">
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
</div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//style
let main= d3.select('#main')
.style('width', '500px')
.style('height', '500px');
main.selectAll('.item')
.style('height', '10px')
.style('width', '100%')
.style('background', (d, i) => {
return i % 2 ? 'red' : 'blue'
})
</script>
- 效果呈现
text
TIP
text
是用来绘制文本的
- 用法:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main">
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
</div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//style
let main= d3.select('#main')
.style('width', '500px')
.style('height', '500px');
main.selectAll('.item')
.style('height', '30px')
.style('width', '100%')
.style('background', (d, i) => {
console.log(d,'d>>>>>>.........')
return i % 2 ? 'red' : 'blue'
})
.text('p')
</script>
呈现效果:
声明:再svg重绘制文本就直接使用svg的text绘制的就行了 用d3js绘制大致这个样:
javascript
d3.select('svg')
.append('text')
.attr('x', 10)
.attr('y', 20)
.style('cursor', 'default')
.text('svg-text')
insert
TIP
append
是像元素后面追加,insert
是像元素前追加用法跟append一样
- 用法示例:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// append
const svg = d3.select('#main')
.insert('svg')
.attr('width', 500)
.attr('height', 500);
//append一个rect 添加一些属性
svg.insert('rect')
.attr('width', 100)
.attr('height', 100)
.attr('fill', 'red')
.attr('x', 10)
.attr('y', 10)
.attr('stroke', 'blue')
</script>
呈现效果:
classed
TIP
classed
多增加一个class类 就是一个元素绑定多个class
- 用法示例:
javascript
d3.select('svg')
.class('svg')
.classed('svg-container')
总结
select
选择单个元素selectAll
选择多个元素append
创建元素并插入domattr
给元素添加属性,支持第二个参数是个回调函数d3。select('rect').attr('width',(d, i) => {})
回调函数第一个参数是它自己绑定的数据(如果没有绑定就是undefined
) 下期讲d3Js的数据绑定。 第二个参数是索引style
跟attr一样支持回调函数样使用(上面有用到可以具体查看)text
是用来绘制文本的insert
是像元素前追加用法跟append一样classed
多增加一个class类 就是一个元素绑定多个class