D3.js 尝试将椭圆附加到svg以覆盖点

我用D3制作了一个散点图。没问题。现在我想覆盖用椭圆绘制的点

我试图通过在数据集中查找max值来获取xOval值，yOval也是如此

    var xOval = d3.scale.linear()
                            .domain([0,d3.max(dataset, function(d) { return d[0]; })])


        var yOval = d3.scale.linear()
                            .domain([0,d3.max(dataset, function(d) { return d[1]; })])

在绘制散射图之后，在身体的更深处，我有：

        svg.append("ellipse")
            .attr("cx", function(d) {
                return xOval(d[0]);
            })


            .attr("cy", function(d) {
                return yOval(d[1]);
           })
           .attr("rx", 10)
           .attr("ry", 10); 

这是行不通的

---

你知道我哪里出了问题吗？

椭圆很难做到这一点，因为你必须确保所有东西都在它定义的路径内。下面是如何做一个圆圈，这应该让你开始

最简单的方法是使用D3的多边形方法。特别是，可以获得由所有点定义的多边形的质心作为圆的中心。然后你所要做的就是找到距离最远的点的距离，你就有了半径

假设数据结构合适，代码看起来像这样

var center = d3.geom.polygon(dataset).centroid(),
r = d3.max(dataset, function(d) {
    return Math.sqrt(Math.pow(xScale(d[0]) - xScale(center[0]), 2) + Math.pow(yScale(d[1]) - yScale(center[1]), 2));

})+rScale

rScale

这里是表示点的圆的半径。覆盖圆的半径需要扩大，以确保不仅覆盖中心，而且覆盖整个数据点圆

---

完整的例子。请注意，这不是最优的，因为会有一个覆盖所有数据点的较小圆圈。

谢谢Lars。我觉得这将是一个挑战，所以你从一个圆开始的想法是一个好主意。哦，如果你想要任何形状，只想覆盖点，你可以使用。嗨，拉尔斯，我接受了你的建议，但是，我必须将centerX和centerY坐标应用到我的线性刻度上。我试图破解这个，但没有用。调整现有比例的正确方法是什么？在计算距离、坐标和半径时，只要保持一致，无论是原始数据还是比例值都无关紧要。如果您使用原始值，请将最终值放入刻度。抱歉，但我如何将值推入现有刻度？