阅读 216

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

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

d3js开篇语

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

什么是d3Js

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTMLCSSSVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作。

上面是官网的介绍、个人理解就是方便操作dom,实现dom数据绑定是最突出的、最强大优点,其实操作dom得话,就javascript又或者jquery都可以轻松实现。绘制svg用javascriptjquery都可以操作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();支持classid标签进行元素选中

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

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

结束语

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