html D3：选择器，d3.select，.selectAll，.data：向DOM元素添加数据

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html D3：选择器，d3.select，.selectAll，.data：向DOM元素添加数据相关的知识，希望对你有一定的参考价值。

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

以上是关于html D3：选择器，d3.select，.selectAll，.data：向DOM元素添加数据的主要内容，如果未能解决你的问题，请参考以下文章

html D3：d3.select，style：选择DOM元素和更改样式背景颜色