D3.js d3js如何获得旋转矩形的角坐标？

我是d3js的新手，在这里有点不知所措。我试图找出如何查询旋转矩形的角坐标，以便在该位置放置一个圆，最终我将使用该圆作为直线链接到其他节点的起始坐标

下面是一张图片，显示了我正在尝试做的事情：

目前，我得到了svg边界左侧的圆圈，我尝试将其大致放置在x下方的位置

这是我的圆圈代码：

  let rx = node.attr("x");
  let ry = node.attr("y");
  g.append("circle")
    .attr("cx",rx)
    .attr("cy",ry)
    .attr("r",5);

这是我的JSFIDLE:和一个堆栈溢出代码段

设d3Root='d3cpm'； 设w=document.documentElement.clientWidth； 设h=document.documentElement.clientHeight； //TODO put any类型 让eData={ 宽度：180， 身高：180， 填充：80， 填充：“E0”， 笔划：“c3c5c5”， 冲程宽度：3， hoverFill:'1958b5'， 悬停冲程：“0046ad”， hoverTextColor:'fff'， 接收号码：18， ry:18， 轮换：45， 标签：“决策节点”， textFill:'黑色'， textHoverFill:'白色' }; 让cWidth； 设cHeight=h； d3.selectd3根 .appenddiv .attrid，d3根 .htmlfunction{ 让_txt=来自D3的Hello！帧宽度：； 让_div=d3。选择此项； 设_w=_div.stylewidth； cWidth=parseInt_div.stylewidth； _txt+=cWidth+视口宽度：+w； 返回_txt； }; 让svg=d3.selectd3Root .appendsvg .attrwidth，cWidth .高度，切特 .calld3.zoom //.scaleExtent[1/2,4] .onzoom，缩放； ; 设g=svg.appendg .onmouseover，函数d{ d3.选择这个 .stylecursor，指针； d3.selectthis.selectrect .stylefill，eData.hoverFill .stylestroke，eData.hoverStroke； d3.选择此项。选择文本 .stylefill，eData.textHoverFill； } .onmouseout，函数d{ d3.选择这个 .stylecursor，默认值； d3.selectthis.selectrect .stylefill，eData.fill .stylestroke，eData.stroke； d3.选择此项。选择文本 .stylefill，eData.textFill； }; 设node=g.appendrect .attrwidth，eData.width .attr高度，eData高度 .attrfill，eData.fill .attr笔划，eData笔划 .attr笔划宽度，eData.strokeWidth .attrrx，eData.rx 艾德瑞先生 .attry，eData.padding .attr'transform'，函数{ 设x=calcXLoc； console.log_x； 返回translate+x+，+0旋转45； } .onclick，=>{ 单击console.logrect； d3.event.stopPropagation； //这是我的错； }; 设nText=g.append'text' .texteData.label .style'fill'，eData.textFill .attr'x'，calcXLoc-50 .attr'y'，eData.宽度+10 .attr文本锚定，中间 .onclick，=>{ 点击console.logtext； d3.event.stopPropagation； //这是我的错； }; 设rx=node.attrx； 设ry=node.attry； g、 附加圆 .ATRTCx，rx .自然损耗 .attrr，5； 函数calcXLoc{ 返回cWidth/2-eData.width/2+eData.width； } 函数放大{ g、 attrtransform，d3.event.transform； } 您正在对矩形应用变换以定位和旋转它。它没有x属性，因此返回为未定义。这会让你稍微靠近一点：

  let rx = parseInt(node.attr("x"), 10) | 0;
  let ry = parseInt(node.attr("y"), 10) | 0;
  let height = parseInt(node.attr("height"), 10) | 0;
  let transform = node.attr("transform");
  g.append("circle")
    .attr("cx",rx + height)
    .attr("cy",ry + height)
    .attr("transform", transform)
    .attr("r",5);

但请注意，这将变得有点笨重和难以处理-如果您的数据以这样一种方式建模，即圆形点也在其中处理，并且可以以某种方式一致地导出/转换，那就更好了

更新小提琴：

---

图片：

哇，谢谢你的帮助！。解决方案中的转换在做什么？只是试着去理解。谢谢将相同的变换应用于圆和矩形变换会改变比赛场地-它们基本上重新映射x/y和旋转属性