Question

我是D3的新手，我正在尝试画这样的东西

到目前为止，我所做的是： https://jsfiddle.net/834wg3g9/

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    .cover {
        width: 400px;
        height: 400px;
        /* border: 1px solid; */
        margin: auto;
        margin-top: 100px;
    }

</style>

<div class="cover">
    <svg></svg>
</div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    // let width = window.innerWidth
    // let height = window.innerHeight
    let width = 400
    let height = 400
    let svg = d3.select("svg")
    svg.attr("width", width)
    .attr("height", height)

    // let nodes = [
    //     {'id': 0,'r': 50, 'color': '#E8837B'},
    //     {'id': 1,'r': 100, 'color': '#FBCB43'},
    //     {'id': 2,'r': 150, 'color': '#16A05D'},
    //     {'id': 3,'r': 200, 'color': '#4C8BF5'},
    // ]

    let nuts = [
        {r: 15},
        {r: 15},
        {r: 15},
        {r: 15},
        {r: 15},
        {r: 15},
    ]

    let nodes = [
        {'id': 3,'r': 400, 'color': '#E8837B'},
        {'id': 1,'r': 330, 'color': '#FBCB43'},
        {'id': 2,'r': 250, 'color': '#16A05D'},
        {'id': 0,'r': 150, 'color': '#4C8BF5'},
    ]

    let simulation = d3.forceSimulation()
    .force('center', d3.forceCenter(width/2, height/2))

    let simulation_2 = d3.forceSimulation()
    .force('charge', d3.forceManyBody().strength(-30))
    .force('center', d3.forceCenter(width/2, height/2))

    let nodeElements = svg.append('g')
    .selectAll('circle')
    .data(nodes)
    .enter().append('circle')
        .attr("class", "node")
        .attr('r', function(d) {
            return d.r
        })
        .attr('fill', function(d) {
            return d.color
        })

    let bottomLineElements = svg.append('g')
    .selectAll('text')
    .data(nodes)
    .enter().append('text')
        .text(function(d) {
            return d.color
        })

    let nutElements = svg.append('g')
    .selectAll('circle')
    .data(nuts)
    .enter().append('circle')
        .attr('fill', 'white')
        .attr('r', function(d) { return d.r })

    simulation_2.nodes(nuts)
    .on('tick', function() {
        nutElements
        .attr('cx', function (d) { return d.x })
        .attr('cy', function (d) { return d.y })
    })
    simulation.nodes(nodes)
    .on('tick', function() {
        nodeElements
        .attr('cx', function (d) { return 400 })
        .attr('cy', function (d) { return 400 })
        bottomLineElements
        .attr('x', function (d) { return 20 + (d.id * 80) })
        .attr('y', function (d) { return 400 })
    })

</script>

现在我陷入了“新的或感动的”和“没有变化”的部分如何在每个区域附加一堆子圆圈，并确保它们不会显示在错误的区域

例如： hold = [{}，{}，{}] 所以3个小圆圈将显示在保持区域

任何建议，关键字来解决这个问题谢谢。

D3绘制子圈

0 个答案: