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

Question

我是 d3js 的新手，在这里感觉有点不知所措。我试图弄清楚如何查询旋转矩形的角坐标，以便我可以在该位置放置一个圆圈（最终我将使用它作为到 link 到其他节点的线的起始坐标） .

这是一张显示我正在尝试做的事情的图片：

目前，我正在获取下方 svg 边界左侧的圆圈，我正在尝试将其大致放置在 x 下方的位置。

这是我的圈子代码：

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

这是我的 jsFiddle：jsFiddle 和 Stack Overflow 片段

  let d3Root = 'd3-cpm';

  let w = document.documentElement.clientWidth;
  let h = document.documentElement.clientHeight;
  //TODO put type any
  let eData = {
    width: 180,
    height: 180,
    padding: 80,
    fill: '#E0E0E0',
    stroke: '#c3c5c5',
    strokeWidth: 3,
    hoverFill: '#1958b5',
    hoverStroke: '#0046ad',
    hoverTextColor: '#fff',
    rx: 18,
    ry: 18,
    rotate: 45,
    label: 'Decision Node',
    textFill: 'black',
    textHoverFill: 'white'
  };
  let cWidth;
  let cHeight = h;

  d3.select(d3Root)
    .append("div")
    .attr("id", "d3-root")
    .html(function () {
    let _txt = "Hello From D3! <br/>Frame Width: ";
    let _div = d3.select(this);
    let _w = _div.style("width");
    cWidth = parseInt(_div.style("width"));
    _txt += cWidth + "<br/> ViewPort Width: " + w;
    return _txt;
  });

  let svg = d3.select(d3Root)
  .append("svg")
  .attr("width", cWidth)
  .attr("height", cHeight)
  .call(d3.zoom()
        //.scaleExtent([1 / 2, 4])
        .on("zoom", zoomed));
  ;
  

  let g = svg.append("g")
  .on("mouseover", function (d) {
    d3.select(this)
      .style("cursor", "pointer");
    d3.select(this).select("rect")
      .style("fill", eData.hoverFill)
      .style("stroke", eData.hoverStroke);
    d3.select(this).select("text")
      .style("fill", eData.textHoverFill);
  })
  .on("mouseout", function (d) {
    d3.select(this)
      .style("cursor", "default");
    d3.select(this).select("rect")
      .style("fill", eData.fill)
      .style("stroke", eData.stroke);
    d3.select(this).select("text")
      .style("fill", eData.textFill);
  });
  

  let node = g.append("rect")
  .attr("width", eData.width)
  .attr("height", eData.height)
  .attr("fill", eData.fill)
  .attr("stroke", eData.stroke)
  .attr("stroke-width", eData.strokeWidth)
  .attr("rx", eData.rx)
  .attr("ry", eData.ry)
  .attr("y", eData.padding)
  .attr('transform', function () {
    let _x = calcXLoc();
    console.log(_x);
    return "translate(" + _x + "," + "0)  rotate(45)";
  })
  .on("click", ()=> {
    console.log("rect clicked");
    d3.event.stopPropagation();
    //this.nodeClicked();
  });

  let nText = g.append('text')
  .text(eData.label)
  .style('fill', eData.textFill)
  .attr('x', calcXLoc() - 50)
  .attr('y', eData.width + 10)
  .attr("text-anchor", "middle")
  .on("click", ()=> {
    console.log("text clicked");
    d3.event.stopPropagation();
    //this.nodeClicked();
  });

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

  function calcXLoc() {
    return (cWidth / 2 - eData.width / 2) + eData.width;
  }
  
 function zoomed() {
    g.attr("transform", d3.event.transform);
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<d3-cpm></d3-cpm>

Answer 1

您正在对 rect 应用 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);

但请注意，这会变得有点笨拙且难以处理 - 如果您的数据以这样一种方式建模，即圆形点也在那里处理并且可能以某种方式进行建模，那就更好了derived/transformed 始终如一....

已更新 fiddle：https://jsfiddle.net/dcw48tk6/7/

图片：

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

d3js how to get rotated rect's corner coordinates?

svg

rect

d3.js