d3--初识

最新推荐文章于 2024-08-22 14:32:34 发布

wz990223

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量207

点赞数

文章标签： D3.js SVG DOM操作 JavaScript SVG元素

本文链接：https://blog.csdn.net/wz990223/article/details/126019952

版权

<!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>d3</title>
    <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <svg width = "300" height = "200">
        <!-- 矩形
        fill：填充颜色
        -->
        <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
     </svg>
     <div class="name">
        123
     </div>
     <div class="name">
        123
     </div>
</body>
<script>
    // append（）方法将新元素作为当前选择中元素的最后一个子元素附加。 此方法还可以修改元素的样式，其属性，属性，HTML和文本内容。
    d3.select('.name').append("span").text('asdfgh')
    // attr（）方法用于添加或更新所选元素的属性。 创建一个网页“select_and_modify.html”并添加以下代码
    d3.select('.name').attr("style","color:red")
    //style（）方法用于设置所选元素的样式属性
    d3.select(".name").style("color","blue")
    // selectAll选择所有  select选择第一个
    d3.selectAll(".name").attr("style","color:green")
</script>
</html>