nick34992
2/24/2017 - 1:39 PM

D3: selector, d3.select, .selectAll, .data: Add Data to DOM Elements

D3: selector, d3.select, .selectAll, .data: Add Data to DOM Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <title>selector | style</title>
    <meta name="description"
          content="Use d3.select to set background color of list item line to
                   darkkhaki">
</head>
<body>
    <!-- http://d3js.org/d3.v3.min.js -->
    <script src="d3/d3.js" charset="utf-8"></script>
    <ul>
        <li id="li01">first</li>
        <li id="li02">second</li>
        <li id="li03">third</li>
        <li id="li04">fourth</li>
        <li id="li05">fifth</li>
        <li id="li06">sixth</li>
        <li id="li07">seventh</li>
        <li id="li08">eighth</li>
        <li id="li09">ninth</li>
        <li id="li10">tenth</li>
        <li id="li11">eleventh</li>
        <li id="li12">twelfth</li>
        <li id="li13">thirteenth</li>
        <li id="li14">fourteenth</li>
        <li id="li15">fifteenth</li>
        <li id="li16">sixteenth</li>
    </ul>
    <script>
        var selector = d3.select('body.ul')
                         .selectAll('li')
                         .data([10, 20, 30, 40, 50, 60, 70, 80, 90
                                100, 110, 120, 130, 140, 150, 160]);
    </script>
</body>
</html>