javascript - D3 小圆位于大圆半径边缘-6ren

javascript - D3 小圆位于大圆半径边缘

转载作者：行者123 更新时间：2023-12-01 03:35:06

我正在制作带有两个圆圈的 d3 视觉效果，其中较小的圆圈放置在较大圆圈的半径边缘。其代码笔位于此处 https://codepen.io/ajblack/pen/KqKpde 。我有一个 200 像素的方形 SVG，将这些圆圈放入其中，然后有两个值 uAssets 和 uAssetsCom 来指定圆圈的大小。我使用以下代码创建一个比率以确保较大的圆适合 200 像素的正方形:

var ratioToFit = (200/uAssets)/2;

然后我使用余弦计算大圆的外半径与 SVG 容器的外边界之间 45 度 Angular 的距离:

var key = 100*((1-Math.cos(45*Math.PI/180))/Math.cos(45*Math.PI/180))

为了放置较小的圆，我将 cx 和 cy 属性计算为内圆的半径加上此“键”。

d3.select("#uAssetComCircle")
  .attr("cx", function(d){return (d.radius+key);})
  .attr("cy", function(d){return (d.radius+key);})

这会将内圆放置在靠近大圆半径的位置，但大约相差 2 个像素。我可以通过在 cx 和 cy 上添加硬编码的 2 像素来抵消这一点，但我觉得我不应该这样做。

我的数学有问题吗？

最佳答案

不确定我完全遵循您的计算，但这里有一个快速重构，介绍了一些内容:

所有绘图均以 SVG 中心点为基础的转换
处理从用户坐标到像素坐标的计算的 d3 比例。

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <script>
    var uAssets = 17;
    var uAssetsCom = 3;

    var svgContainer = d3.select("body").append("svg")
      .attr("width", 200)
      .attr("height", 200)
      .attr('id', 'circleContainer')
      .append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")")

    var scale = d3.scaleLinear()
      .domain([0,uAssets])
      .range([0,100]);

    var jsonCircles = [{
      "radius": uAssets,
      "color": "green",
      "id": "uAssetCircle"
    }, {
      "radius": uAssetsCom,
      "color": "purple",
      "id": "uAssetComCircle"
    }];

    var circles = svgContainer.selectAll("circle")
      .data(jsonCircles)
      .enter()
      .append("circle");

    var circleAttributes = circles
      .attr("r", function(d) {
        return scale(d.radius);
      })
      .attr("id", function(d) {
        return d.id
      })
      .style("fill", function(d) {
        return d.color;
      });

    d3.select("#uAssetComCircle")
      .attr("cx", function(d) {
        return scale(uAssets) * Math.cos(45 * (Math.PI / 180));
      })
      .attr("cy", function(d) {
        return scale(uAssets) * Math.sin(45 * (Math.PI / 180));
      })
  </script>
</body>

</html>