数据可视化-D3.js框架：「22]给 Circle 元素添加属性

路条编程 2021-11-12

873

这一系列课程将介绍D3.js 或 D3 代表数据驱动的文档。D3 是一个 JavaScript 库，用于在浏览器中创建动态和交互式数据可视化。它是为使用常见的 web 标准而构建的，即 HTML、CSS 和可伸缩矢量图形（SVG）。

D3 获取输入数据并将其映射为该数据的可视表示。它支持多种不同的数据格式。D3 允许您将数据绑定（或附加）到文档对象模型（DOM）。您可以使用带有 D3 内置方法的 HTML 或 SVG 元素将数据转换为可视化。

D3 为您提供了对数据表示的大量控制。本课程将介绍 D3 库的基本功能以及如何使用 D3 库创建可视化效果。

给 Circle 元素添加属性

上篇文章我们为 dataset 中的每个点都创建了 circle 元素，并将它们添加到 SVG 画布上。但是 D3 需要更多关于位置和 circle 大小的信息来正确的显示它们。

在 SVG 中 circle 有三个主要的属性。cx 和 cy 属性是坐标，它们告诉 D3 将图形的中心放在 SVG 画布的何处。半径（ r 属性）给出 circle 的大小。

就像 rect 的 y 坐标，circle 的 cy 属性是从 SVG 画布的顶端开始测量的，而不是从底端。

所有的属性都可以用回调函数来动态设值。记住，所有串联在 data(dataset) 后面的方法为 dataset 中的每个对象都运行一次。回调函数中的 d 参数指在 dataset 中的当前对象，对每个点来说都是一个数组。就像 d[0]，我们可以使用方括号的方式来访问数组中的值。

今天的练习我们为 circle 元素添加 cx、cy、r 属性。cx 的值应该是 dataset 中每个对象的数组的第一个数，cy 的值应该根据数据中的第二个数，但是要确保正向显示图表而不是倒转。所有圆圈的 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) => d[0])
       .attr("cy", (d) => h - d[1])
       .attr("r", 5)
  </script>
</body>

如果想查看运行效果，请点击文章原文查看。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。练习网站已经正式上线，大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

数据可视化-D3.js框架：「22]给 Circle 元素添加属性

评论