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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

四、解析

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

参考

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

更新

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

相关阅读:
为什么说Redis是单线程的以及Redis为什么这么快！
基于java ssm springboot女士电商平台系统
一文读懂网络效应对Web3的重要意义
手记：把代码上传到Gitee等远程仓库的过程记录及常见问题
lv11 嵌入式开发计算机硬件基础 1
使用depp在小程序中子组件修改第三方ui库uview，样式不生效问题
力扣刷题之2970.统计移除递增子数组的数目I
9.12|day 5|day 44 |完全背包| 518. 零钱兑换 II | 377. 组合总和 Ⅳ
GCC 指令详解及动态库、静态库的使用
java日志框架详解-slf4j

原文地址：https://blog.csdn.net/qq_31646657/article/details/128148874