用d3js计算螺旋分段

Posted 2021-03-30

我用d3js创建了一个螺旋可视化。实例here我正在尝试创建（基本上是为了突出显示）螺旋的子部分。螺旋定义如下：

const start = 0
const end = 2.25

const theta = function(r) {
  return numSpirals * Math.PI * r
}

const radius = d3.scaleLinear()
  .domain([start, end])
  .range([20, r])

const spiral = d3.radialLine()
  .curve(d3.curveCardinal)
  .angle(theta)
  .radius(radius)

const points = d3.range(start, end + 0.001, (end - start) / 1000)

const path = g.append("path")
  .datum(points)
  .attr("id", "spiral")
  .attr("d", spiral)
  .style("fill", "none")
  .style("stroke", "steelblue");

使用以下内容将一些随机点放置在螺旋中：

  const positionScale = d3.scaleLinear()
      .domain(d3.extent(mockedData, (d, i) => i))
      .range([0, spiralLength]);

  const circles = g.selectAll("circle")
    .data(mockedData)
    .enter()
    .append("circle")
    .attr("cx", (d,i) => {
      const linePos = positionScale(i)
      const posOnLine = path.node().getPointAtLength(linePos)

      d.cx = posOnLine.x
      d.cy = posOnLine.y

      return d.cx;
    })
   .attr("cy", d => d.cy)
   .attr("r", d => circleRadiusScale(d.value))

如果螺旋的开始和结束是[0,2.25]，通过创建一个从0到1（而不是0到2.25）的新点集，很容易得到螺旋的子部分从0到1：

const pointSubSpiral = d3.range(0, 1 + 0.001, 1 / 1000)

我遇到的问题是当我尝试根据数据点创建螺旋的子部分时。例如，从0到第3点的位置。线性刻度不起作用：

const spiralSectionScale = d3.scaleLinear()
  .range([start, end])
  .domain([0, mockedData.length])

const spiralEnd = spiralSectionScale(i)
const sectionPoints = d3.range(0, 1 + 0.001, 1 / 1000)

const path2 = g.append("path")
    .datum(sectionPoints)
    .attr("id", "spiral-section")
    .attr("d", spiral)
    .style("fill", "none")
    .style("stroke", "red")
    .style("stroke-width", "1.2em")
    .style("opacity", "0.2")
    .style("pointer-events", "none")

有没有办法将数据域中的值转换为螺旋域？

更新：基于@ rioV8的答案，我已经设法让螺旋部分工作。基本上通过在节点的半径上创建二进制搜索：

  function findSpiralSection(targetRadius, start, end) {
    const endSection = (end + start) / 2
    const endSectionRadius = radius(endSection)

    if (Math.abs(targetRadius - endSectionRadius) < 0.1) {
      return endSection 
    }

    if ((targetRadius - endSectionRadius) > 0) {
      return findSpiralSection(targetRadius, endSection, end)
    } else {
      return findSpiralSection(targetRadius, start, endSection)
    }
  }

  function higlightSubSpiral(d, i) {
    const linePos = positionScale(i);
    const targetNode = path.node().getPointAtLength(linePos);
    const nodeRadius = Math.sqrt((targetNode.x * targetNode.x) + (targetNode.y * targetNode.y))

    const bestEndSection = findSpiralSection(nodeRadius, start, end);

    const sectionPoints = d3.range(0, bestEndSection + 0.001, bestEndSection / 1000)

    const path2 = g.append("path")
        .datum(sectionPoints)
        .attr("id", "spiral-section")
        .attr("d", spiral)
        .style("fill", "none")
        .style("stroke", "red")
        .style("stroke-width", "1.2em")
        .style("opacity", "0.2")
        .style("pointer-events", "none")
  }

答案

你的螺旋切成约1000块，每块都有一个相等的三角形，但半径不同。因此，每个段具有不同的长度。

您沿着螺旋线以规则的长度间隔(total_length/99)定位圆圈。它们与线性累积角度不对应，因为段长度不同。

您必须使用二进制搜索来查找所需的end-angle值。

它应该适用于最后一点，所以spiralSectionScale存在问题。在有一个范围[0, mockedData.length]，这是1太大了

var spiralSectionScale = d3.scaleLinear()
  .range([start, end])
  .domain([0, mockedData.length-1]);

最初的positionScale有一个复杂的计算域的方式。这更具可读性和速度。

const positionScale = d3.scaleLinear()
    .domain([0, mockedData.length-1])
    .range([0, spiralLength]);