【看了必懂D3JS(一)】d3js select、selectAll、attr、style、append

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

d3js开篇语

自从去年写项目需要一直再使用d3js，2年时间不说非常熟练吧，也是略有了解，有些心得分享给大家，分享给大家怎么一步步用d3js + svg 绘图的。

什么是d3Js

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。上面是官网的介绍、个人理解就是方便操作dom，实现dom数据绑定是最突出的、最强大优点，其实操作dom得话,就javascript又或者jquery都可以轻松实现。绘制svg用javascript、jquery都可以操作dom进行绘制，but为什么选择d3JS呢？

个人观点理解`d3js`

我觉得大家对d3js，不要有错误的理解，它不是一个绘图库,他是一个方便操作dom的库，不是只能用来绘制图形，平常遇到操作dom的话用起来也不错呢。还有说下d3Js的优点：1、实现dom和数据的绑定；2、d3js社区非常好有一系列配套的插件方便你查阅。3、中文文档翻译的也不错方便你学习；

关于d3Js的一下学习

1.中文文档
2.官网
3.社区
4.推荐书籍（图说d3JS）讲的是v3版本的但是基础面很全非常适合新手里面还带你了解基础svg,当然可以在我之前分享的SVG基础学习

准备工作

我再分享中写的案例以及api都是基于d3.v5版本 CDN <script src="https://d3js.org/d3.v5.min.js"></script>

select、selectAll

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

用法：

//select： 选中一个
<!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>

是不是看了后觉得很方便，不要急还没展示d3Js的真正魅力

attr

attr方法是给元素添加属性类似于javascript的attributes() 用法：

<!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

大家可以看出来我上面的svg、rect都是再html上添加好然后用attr添加属性的。其实不用先定义好 append帮咱们创建元素并插入dom

用法

<!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

<!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

总结

今天分享了5个d3js常用的api:

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

⭐⭐⭐⭐⭐下期更精彩也是d3js的一个关键点：数据绑定，会带大家实现一个数据驱动的dom

结束语

大家好我是三原，多谢您的观看，我会更加努力(๑•̀ㅂ•́)و✧多多总结。
每个方法都是敲出来验证过通过的，有需要可以放心复制。
如果您给帮点个赞👍就更好了谢谢您~~~~~
期待您的关注