html D3：d3.selectAll，。style：替代背景颜色并逐渐增加列表元素的宽度

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html D3：d3.selectAll，。style：替代背景颜色并逐渐增加列表元素的宽度相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>d3.select | style</title>
    <meta name="description"
          content="Use d3.select to set background color of list item line to
                   darkkhaki">
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <ul>
        <li id="li1">first</li>
        <li id="li2">second</li>
        <li id="li3">third</li>
        <li id="li4">fourth</li>
        <li id="li5">fifth</li>
        <li id="li6">sixth</li>
        <li id="li7">seventh</li>
    </ul>
    <script>
        d3.selectAll("li")
            .style('width', function(d, i) {
                return (40 + 40 * i) + "px";
            })
            .style('background-color', function (d, i) {
                return (i % 2 === 0) ? 'khaki' : 'darkkhaki';
            });
    </script>
</body>
</html>

以上是关于html D3：d3.selectAll，。style：替代背景颜色并逐渐增加列表元素的宽度的主要内容，如果未能解决你的问题，请参考以下文章

当我在d3.js中执行.data（数据）时，如何跳过数组元素

d3.js学习笔记