current position:Home>[you must understand d3js (I)] d3js select, SelectAll, attr, style, append

[you must understand d3js (I)] d3js select, SelectAll, attr, style, append

2021-08-27 02:06:44 Sanyuan

This is my participation 8 The fourth of the yuegengwen challenge 7 God , Check out the activity details :8 Yuegengwen challenge

d3js Introductory words

It has been used since last year's project d3js,2 Years, not to mention very skilled , Also know a little , Some experience to share with you , Share with you how to use it step by step d3js + svg Drawn .

What is? d3Js

D3js  Is a document that can be manipulated based on data  JavaScript  library . Can help you use  HTMLCSSSVG  as well as  Canvas  To show the data .D3  Follow existing  Web  standard , It can run independently in modern browsers without any other framework , It is driven by powerful visualization components  DOM  operation .

The above is the introduction of the official website 、 Personal understanding is to facilitate operation dom, Realization dom Data binding It's the most outstanding 、 The most powerful advantage , Actually operation dom If you have to , Just javascript Or, jquery Can be easily realized . draw svg use javascriptjquery All can be operated dom Drawing ,but Why choose d3JS Well ?

Personal point of view understanding d3js

I think everyone is right d3js, Don't have a wrong understanding , It's not a Drawing library , He is a convenient operator dom The library of , Not only for drawing graphics , Common operations dom It's also good to use . And say d3Js The advantages of :1、 Realization dom And data binding ;2、d3js The community is very good. There are a series of supporting plug-ins for you to consult .3、 The translation of Chinese documents is also good, which is convenient for you to learn ;

About d3Js Let's learn

  • 1. Chinese document
  • 2. Official website
  • 3. Community
  • 4. Recommended books ( Graph d3JS) It's about v3 Version, but the foundation is very complete. It is very suitable for novices. It also takes you to understand the foundation svg, Of course you can share it before me SVG Basics Study

preparation

I'll share the cases written in and api It's all based on d3.v5 edition CDN <script src="https://d3js.org/d3.v5.min.js"></script>

select、selectAll

Be similar to javascript Of document.querySelector(); document.querySelectorAll(); Support classid label Select the element

  • usage :
//select:  Choose one 
<!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 // The first one is Id Choose  const main1 = d3.select('#main'); console.log(main1,'main1'); // The second kind class const main2 = d3.select('.main'); console.log(main2,'main2'); // The third label  const main3 = d3.select('body > div'); console.log(main3,'main3'); //selectAll Same as select Support id、class、 Tab select multiple  const pAll1 = d3.selectAll('#main > .item'); console.log(pAll1 ,'pAll1'); const pAll2 = d3.selectAll('#main > p'); console.log(pAll2 ,'pAll2'); </script>
 Copy code 

Is it convenient after reading it , Don't worry, it hasn't been shown yet d3Js The real charm of

attr

attr The method is to add attributes to the element, similar to javascript Of attributes() usage :

<!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 // Add one class  name  d3.select('#main') .attr('class', 'd3-main'); // to svg Defines the of the container width、height d3.select('svg') .attr('width', 500) .attr('height', 500) // to rect  Add some properties  d3.select('rect') .attr('width', 100) .attr('height', 100) .attr('fill', red) .attr('x', 10) .attr('y', 10) .attr('stroke', 'blue') </script>
 Copy code 

Show the effect :

1629629840(1).png

append

You can see what's above me svg、rect All again html Add good And then use attr Add attribute . You don't have to define it first append Help us create elements and insert dom

  • usage
<!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 One rect  Add some properties  svg.append('rect') .attr('width', 100) .attr('height', 100) .attr('fill', red) .attr('x', 10) .attr('y', 10) .attr('stroke', 'blue') </script>
 Copy code 
  • effect

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>
 Copy code 
  • Effect of rendering

1629630563(1).png

summary

Today I shared 5 individual d3js frequently-used api:

  • select Select individual elements
  • selectAll Select multiple elements
  • append Create an element and insert dom
  • attr Add attributes to elements , The second parameter supported is a callback function d3.select('rect').attr('width',(d, i) => {}) Callback function first A parameter is its own bound data ( If there is no binding, it is undefined) Next issue d3Js Data binding of . The second parameter is the index
  • style Follow attr It also supports the use of callback functions ( The above is so useful that you can see )

The next issue is even more exciting d3js A key point of : Data binding , Will take you to achieve a data-driven dom

Conclusion

  • Hello everyone I'm Sanyuan , Thank you for watching , I will work harder (๑•̀ㅂ•́)و* A lot of summary .
  • Each method is knocked out and verified , If necessary, you can safely copy .
  • It would be better if you gave me some praise Thank you very much ~~~~~
  • Looking forward to your attention

copyright notice
author[Sanyuan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827020639889o.html

Random recommended