Skip to content
On this page

d3 base api

TIP

关于d3基础常用api介绍

select、selectAll

TIP

类似于javascript的document.querySelector();document.querySelectorAll();支持classid标签进行元素选中

  • 用法:
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方法是给元素添加属性类似于javascriptattributes()

用法:

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>

展示效果:

1629629840(1).png

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>
  • 效果

1629630117(1).png

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>
  • 效果呈现

1629630563(1).png

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>

呈现效果:

1629699642(1).png 声明:再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>

呈现效果:

1629699745(1).png

classed

TIP

classed 多增加一个class类 就是一个元素绑定多个class

  • 用法示例:
javascript
d3.select('svg')
  .class('svg')
  .classed('svg-container')

总结

  • select 选择单个元素
  • selectAll 选择多个元素
  • append 创建元素并插入dom
  • attr 给元素添加属性,支持第二个参数是个回调函数d3。select('rect').attr('width',(d, i) => {}) 回调函数第一个参数是它自己绑定的数据(如果没有绑定就是undefined) 下期讲d3Js的数据绑定。 第二个参数是索引
  • style 跟attr一样支持回调函数样使用(上面有用到可以具体查看)
  • text 是用来绘制文本的
  • insert是像元素前追加用法跟append一样
  • classed 多增加一个class类 就是一个元素绑定多个class

Released under the MIT License.