开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的23天，点击查看活动详情

给 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 的值应该根据数组中的第二个值，但是要确保正向显示图表而不是倒转。所有 circle 的 r 值应为 5。

你应该有 10 个 circle 元素。
第一个 circle 元素的 cx 值应为 34，cy 值应为 422，r 值应为 5。
第二个 circle 元素的 cx 值应为 109，cy 值应为 220，r 值应为 5。
第三个 circle 元素的 cx 值应为 310，cy 值应为 380， r 值应为 5。
第四个 circle 元素的 cx 值应为 79，cy 值应为 89，r 值应为 5。
第五个 circle 元素的 cx 值应为 420，cy 值应为 280，r 值应为 5。
第六个 circle 元素的 cx 值应为 233，cy 值应为 355，r 值应为 5。
第七个 circle 元素的 cx 值应为 333，cy 值应为 404，r 值应为 5。
第八个 circle 元素的 cx 值应为 222，cy 值应为 167， r 值应为 5。
第九个 circle 元素的 cx 值应为 78，cy 值应为 180，r 值应为 5。
第十个 circle 元素的 cx 值应为 21，cy 值应为 377，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>

给 Circle 元素添加属性(实现散点图)

给 Circle 元素添加属性

介绍

挑战