D3.js D3js使用手动绘制的圆进行缩放

我正在做一个d3散点图，图中的一个区域将被圈起来（一个Youden图）。基于可用的样本，我已经能够将缩放添加到我的数据点和轴上。但是，我无法使圆正确缩放

我怀疑我需要建立某种规模（

scaleSqrt

，可能），但我很难找到初学者编写的文档

我目前的圆圈代码非常简单

var circle = drawCircle();
function drawCircle() {
    return svg
      .append('g')
      .attr('class', 'scatter-group')
      .append('circle')
      .attr("r", 75 )
      .attr('cx', 200 + margin.left) //suspect this needs to be related to a scale
      .attr('cy', 200 + margin.top) //suspect this needs to be related to 
      .attr('r', 75)//suspect this needs to be related to a scale
      .attr('stroke', 'red')
      .attr('stroke-width', 3)
      .style('fill', 'none')
  }

与缩放的

功能一样

function zoomed() {
    var new_xScale = d3.event.transform.rescaleX(xScale);
    var new_yScale = d3.event.transform.rescaleY(yScale);

    // update axes
    gX.call(xAxis.scale(new_xScale));
    gY.call(yAxis.scale(new_yScale));

    //redraw data ppints    
    points.data(data)
        .attr('cx', function(d) {return new_xScale(d.x)})
        .attr('cy', function(d) {return new_yScale(d.y)});

    //redraw circle
}

我正在进行的工作可以在中找到。有人能给我指出正确的方向吗？
我相信这会让你走到那里的大部分路。您需要更新
缩放
功能中的
圆圈
属性以及其他元素：

function zoomed() {
    var new_xScale = d3.event.transform.rescaleX(xScale);
    var new_yScale = d3.event.transform.rescaleY(yScale);

    // update axes
    gX.call(xAxis.scale(new_xScale));
    gY.call(yAxis.scale(new_yScale));

    //redraw data ppints    
    points.data(data)
        .attr('cx', function(d) {return new_xScale(d.x)})
        .attr('cy', function(d) {return new_yScale(d.y)});


    // The new part:

    // the transform
    let trans     = d3.event.transform  
    // the approximate domain value of the circle 'cx' for converting later                  
    let cx_domain = xScale.invert(200 + margin.left) 
    // the approximate domain value of the circle 'cy' for converting later 
    let cy_domain = yScale.invert(200 + margin.top)
    // the circle
    let circ      =  d3.select('.scatter-group circle')
    // the radius
    let rad       = 75

    // reset the circle 'cx' and 'cy' according to the transform
    circ
    .attr('cx',function(d) { return new_xScale(cx_domain)})
    .attr('cy',function(d) { return new_yScale(cy_domain)}) 
    // reset the radius by the scaling factor
    .attr('r', function(d) { return rad*trans.k }) 

} 

看到这个了吗

你会注意到，圆圈的缩放或移动速度与散射点的速度不一样。这可能是因为使用了
invert
功能，因为从
range
到
domain
再回到
range
的转换是不完善的。这个问题是

对于范围内的有效值y，continuous（continuous.invert（y））近似等于y；类似地，对于域中的有效值x，continuous.invert（continuous（x））大约等于x。由于浮点精度的限制，标度及其倒数可能不精确

您最初的想法是将动态值分配给
cx
、
cy
和
r
，这可能会弥补这一点，因为这样您就可以避免反转。
我相信这将使您在大部分方面达到目的。您需要更新
缩放
功能中的
圆圈
属性以及其他元素：

function zoomed() {
    var new_xScale = d3.event.transform.rescaleX(xScale);
    var new_yScale = d3.event.transform.rescaleY(yScale);

    // update axes
    gX.call(xAxis.scale(new_xScale));
    gY.call(yAxis.scale(new_yScale));

    //redraw data ppints    
    points.data(data)
        .attr('cx', function(d) {return new_xScale(d.x)})
        .attr('cy', function(d) {return new_yScale(d.y)});


    // The new part:

    // the transform
    let trans     = d3.event.transform  
    // the approximate domain value of the circle 'cx' for converting later                  
    let cx_domain = xScale.invert(200 + margin.left) 
    // the approximate domain value of the circle 'cy' for converting later 
    let cy_domain = yScale.invert(200 + margin.top)
    // the circle
    let circ      =  d3.select('.scatter-group circle')
    // the radius
    let rad       = 75

    // reset the circle 'cx' and 'cy' according to the transform
    circ
    .attr('cx',function(d) { return new_xScale(cx_domain)})
    .attr('cy',function(d) { return new_yScale(cy_domain)}) 
    // reset the radius by the scaling factor
    .attr('r', function(d) { return rad*trans.k }) 

} 

看到这个了吗

你会注意到，圆圈的缩放或移动速度与散射点的速度不一样。这可能是因为使用了
invert
功能，因为从
range
到
domain
再回到
range
的转换是不完善的。这个问题是

对于范围内的有效值y，continuous（continuous.invert（y））近似等于y；类似地，对于域中的有效值x，continuous.invert（continuous（x））大约等于x。由于浮点精度的限制，标度及其倒数可能不精确

您将动态值分配给
cx
、
cy
和
r
的最初想法可能会弥补这一点，因为这样您就可以避免反转。
您是一个向导，Harry！非常感谢。你是个巫师，哈利！非常感谢。