Question

我用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")
  }

Answer 1

您的螺旋被切成〜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]);

使用d3js计算螺旋分段

1 个答案: