如何在d3 v7中使用d3 pack创建螺旋图？

Question

我能够使用 d3 pack 创建图表，但想要在螺旋布局中定位圆圈，如何在 pack 中定位圆圈这是我的代码

const sortBubble = () => {
        setShowBackButton(true)

        const svg = d3.select(svgReference.current)
        svg.selectAll('*').remove()

        const colorScale = createColorScale()
        const valueScale = createValueScale(sortChartData)

        svg.append('g').attr('class', 'circle-group')

        const root = d3
            .hierarchy({
                children: sortChartData
            })
            .sum(d => d.value)
            .sort((a, b) => a.value - b.value)
        const nodes = root.descendants().filter(d => !d.children)

        d3
            .pack()
            .size([width / 2, height / 2])
            .padding(15)(root)

        svg
            .selectAll('.bubbleNode')
            .data(nodes)
            .enter()
            .append('circle')
            .attr('class', 'bubbleNode')
            .attr('cx', d => d.x ?? 0)
            .attr('cy', d => d.y ?? 0)
            .attr(
                'r',
                d =>
                    calculateRadius(d, bubbleData, valueScale) + COLLISION_RADIUS_FACTOR
            )
            .attr('fill', d => colorScale(d.value))
            .attr('transform', d => `translate(${d.x},${d.y})`)
    }
[Getting chart like this with this code](https://i.stack.imgur.com/Xzx8O.png)

请有人告诉我如何以螺旋图案放置圆圈

Answer 1

这是显示螺旋的示例，每个节点都有一个小圆圈。

    // Set up SVG container
    const svgWidth = 600;
    const svgHeight = 400;
    const svg = d3.select('body').append('svg')
        .attr('width', svgWidth)
        .attr('height', svgHeight);

    // Spiral parameters
    const centerX = svgWidth / 2;
    const centerY = svgHeight / 2;
    const radius = 10;
    const angleIncrement = 0.1;

    // Generate points for the spiral
    const spiralPoints = [];
    for (let angle = 0; angle < 10 * Math.PI; angle += angleIncrement) {
        const x = centerX + radius * angle * Math.cos(angle);
        const y = centerY + radius * angle * Math.sin(angle);
        spiralPoints.push({ x, y });
    }

    // Draw circles at each spiral point
    svg.selectAll('circle')
        .data(spiralPoints)
        .enter().append('circle')
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
        .attr('r', 5)  // Circle radius
        .attr('fill', 'red');  // Circle color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spiral Drawing with D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

如何在d3 v7中使用d3 pack创建螺旋图？

问题描述投票：0回答：1

1个回答

最新问题

如何在d3 v7中使用d3 pack创建螺旋图？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1