【D3.js】2.2-给 Circle 元素添加属性

最新推荐文章于 2024-04-12 16:19:09 发布

GDBBader

最新推荐文章于 2024-04-12 16:19:09 发布

阅读量769

点赞数

分类专栏： D3.js 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_31646657/article/details/128148874

版权

D3.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

title: 【D3.js】2.2-给 Circle 元素添加属性
date: 2022-12-02 15:19
tags: [JavaScript,CSS,HTML,D3.js,SVG]

上章节中虽然添加了circle，但是因为缺少某些属性设置而显得不可见，在此章节中将学习circle的cx、cy、r属性。

一、学习目标

circle的x坐标与y坐标用什么属性表示

cx、cy

circle的半径用什么属性表示

r

二、题目

为 circle 元素添加 cx、cy、r 属性。 cx 的值应该是 dataset 中每个对象的数组的第一个数， cy 的值应该根据数组中的第二个值，但是要确保正向显示图表而不是倒转。所有 circle 的 r 值应为 5。

三、通关代码

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];


    const w = 500;
    const h = 500;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       // 在这行下面添加代码
        .attr("cx",(d,i)=>d[0])
        .attr("cy",(d,i)=>h-d[1])
        .attr("r",5)
       // 在这行上面添加代码

  </script>
</body>

四、解析

        .attr("cx",(d,i)=>d[0]) // 为circle添加cx属性
        .attr("cy",(d,i)=>h-d[1]) // 为circle添加xy属性
        .attr("r",5) // 为circle添加r属性

参考

用 D3 实现数据可视化: 给 Circle 元素添加属性 | freeCodeCamp.org

更新

前往【D3.js】2.2-给 Circle 元素添加属性 | 张鹏帅的官方网站查看更新。

GDBBader

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【D3.js】2.2-给 Circle 元素添加属性

【D3.js】2.2-给 Circle 元素添加属性上章节中虽然添加了circle，但是因为缺少某些属性设置而显得不可见，在此章节中将学习circle的cx、cy、r属性。
复制链接

扫一扫

专栏目录