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

问题描述

我正在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函数给我一个区间（角度），我应该在哪个部分画圆 fe（北（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);

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

标签： javascriptreactjsd3.js

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

问题描述

解决方案

推荐阅读