양군의 행복한 이야기

D3JS-2 DOM Selection 본문

카테고리 없음

D3JS-2 DOM Selection

까망거북 2021. 12. 16. 13:49

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./d3.js"></script>
    <style>
        table,
        tr,
        td {
            width: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body onload="initHtml()">
    <p>first p tag</p>
    <p>second p tag</p>
    <p class="ptag">third p tag</p>
    <p class="ptag">fourth p tag</p>
    <table>
        <tr>
            <td class='tblHead'>1231</td>
            <td class='tblHead'>1232</td>
        </tr>
        <tr>
            <td>1233</td>
            <td>1234</td>
        </tr>
    </table>
</body>

<script>
    function initHtml() {
        let pto = d3.select("p");       // html 에서 첫번째 나오는 p tag를 찾는다.
        pto.text("hi ptag change");     // 찾은 객체에 text를 변경한다.

        let cptg = d3.selectAll(".ptag");   // html에서 class가 ptag인 모든 것들을 찾는다.
        cptg.text("ptag class change");     // 찾은 객체의 모든 text를 변경한다.
        
        let tblHdO = d3.selectAll('td.tblHead');    // html에서 td tag 중 class가 tblHead인 모든 항목을 찾는다.
        tblHdO.style("background-color", "yellow"); // 찾은 객체의 backgroud-color를 yellow로 변경한다.
        
    }
</script>

</html>

https://github.com/heangsik/d3js_sample_hs/tree/main/select_dom

 

GitHub - heangsik/d3js_sample_hs

Contribute to heangsik/d3js_sample_hs development by creating an account on GitHub.

github.com

 

 

d3.select 또는 d3.selectAll로 tag(xxx), class(#xxx), id(. xxx) 원하는 항목을 찾을 수 있다.

찾은 항목을 text테그 등을 사용하여 문자를 수정한다.

또는 style을 변경할 수 있다.