如何在d3极坐标散点图中找到线之间的圆的位置答案

【问题标题】：how to find position of circles between lines in d3 polar scatter chart如何在d3极坐标散点图中找到线之间的圆的位置
【发布时间】：2020-05-12 08:43:32
【问题描述】：

我正在d3中绘制极坐标散点图。

如何计算线之间的圆的位置，使它们不会与线重叠。 ?

画线：

这个d.angle 是圆上弧度的直线位置。每一行都有样式stroke-width: 3px;

   svg
        .selectAll('Lines')
        .data(themeCoordinates)
        .enter()
        .append('g')
        .attr('class', 'line')
        .append('line')
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', (d) => {
          return linear(1) * Math.cos(d.angle);
        })
        .attr('y2', (d) => {
          return linear(1) * Math.sin(d.angle);
        });

2。 calcTrendRadius 函数计算应该在哪个环上画圆（0-20km），（20-40km）

calcTrendCoordinates 函数给我一个区间（角度），我应该在哪个部分画圆 f.e（北（Math.PI/2），东北（2* Math.PI））或（东北，东）。输入参数 themeCoordinates 根据第二个输入参数 trendObj.themeName 给我区间。

const linear = d3
  .scaleLinear()
  .domain([minDomain, maxDomain])
  .range([0, radius]);


  const calculateDataPosition = () => {
      const dataPosition = data.map((trendObj) => {
        const trendRadius = calcTrendRadius(trendObj.stage);
        const { x, y } = calcTrendCoordinates(
          themeCoordinates,
          trendObj.themeName
        );
        return {
          x: linear(trendRadius) * x, // position of circle on x axis
          y: linear(trendRadius) * y,  //position of circle on y axis
          ...trendObj
        };
      });
    };

最后，这是我画圆的方式：

const wrapper = svg
        .selectAll('Points')
        .data(newData)
        .enter()
        .append('g')
        .attr('transform', (d, i) => {
          return 'translate(' + [d.x, d.y] + ')';
        })
      wrapper
        .append('circle')
        .attr('class', 'point')
        .attr('r', circleRadius)
        .attr('fill', (d, i) => d.color);

这些图片仅用于说明。我只画圆圈。在我的例子中，一些圆圈是重叠的线，因为它们的坐标是随机计算的。

【问题讨论】：

标签： javascript reactjs d3.js

【解决方案1】：

递归计算圆与直线的交点，直到圆不与直线相交。我在这里使用了一个现有的解决方案：https://bl.ocks.org/milkbread/11000965。

【讨论】：