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

向散点图的 Circles 添加标签

介绍

你可以为散点图中的点添加文本来创建标签。

目标是显示 dataset 中每个对象的第一个（x）和第二个（y）字段中通过逗号分隔的值。

text 节点需要 x 和 y 属性来指定放置在 SVG 画布中的位置。在这个挑战中，y 值（决定高度）可以用和 circle 的 cy 属性相同的值， x 值可以比 circle 的 cx 值稍微大一些，这样标签才可见，并且被放置在散点的右边。

挑战

使用 text 元素标记散点图上的每个点。标签的文本应该是用逗号和空格分隔的两个值。例如，第一个点的标签是 34, 78。设置 x 属性，使其比 circle 上的 cx 属性的值多 5 个单位。设置 y 属性的方式与 circle 上的 cy 值相同。

应该有 10 个 text 元素。
第一个标签的文本应为 34, 78， x 值应为 39，y 应为 422。
第二个标签的文本应为 109, 280，x 值应为114，y 值应为 220。
第三个标签的文本应为 310, 120，x 值应为 315，y 值应为 380。
第四个标签的文本应为 79, 411，x 值应为 84，y 值应为 89。
第五个标签的文本应为 420, 220，x 值应为 425，y 值应为 280。
第六个标签的文本应为 233, 145，x 值应为 238，y 值应为 355。
第七个标签的文本应为 333, 96，x 值应为 338，y 值应为 404。
第八个标签的文本应为 222, 333，x 值应为 227，y 值应为 167。
第九个标签的文本应为 78, 320，x 值应为 83，y 值应为 180。
第十个标签的文本应为 21, 123，x 值应为 26，y 值应为 377。

<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);

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       
       .attr("x",d=>d[0]+5)
       .attr("y",d=>h-d[1])
       .text(d=>d[0]+", "+d[1])
       
  </script>
</body>