Javascript D3.js-在散点图中围绕簇添加圆形/椭圆形

我有一个非常简单的散点图：

 var data = [
  [10, 20], [20, 100], [200, 50],
  [25, 80], [10, 200], [150, 75],
  [10, 70], [30, 150], [100, 15]
]

var svg = d3.select("body")
            .append("svg")
            .attr("width", 250)
            .attr("height", 250)

svg.selectAll("circle")
   .data(data).enter()
   .append("circle")
   .attr("cx", function(d) {return d[0]})
   .attr("cy", function(d) {return d[1]})
   .attr("r", 7)
   .attr("fill", function(d){
      if(d[0] > 50) {
         return "red"
      } else {
         return "green"
      }
   })

这是目前的结果

但是，我必须连接不同的颜色，并围绕每个“簇”绘制一个非矩形形状。预期结果如下所示：

---

我对D3.js不太熟悉，无法创建椭圆形SVG。是否有人有解决方案或至少有人提示我如何解决此问题？

请查看SVG中的

ellipse

。此示例可能会让您感兴趣：