Question

我正在尝试创建一个动态气泡图，其中根据选定的过滤器添加/删除气泡。最终将通过 ajax 从我的服务器调用数据，但目前我只有一组对象，我可以使用按钮添加或删除这些对象。

我有两个问题暂时无法解决。

当我单击“添加气泡”按钮时，会添加一个气泡，但它似乎并未添加到力模拟中？
当我单击“删除气泡”按钮时，带有被删除数据的气泡不会被 exit.remove() 删除

可以在此处找到完整代码 https://jsfiddle.net/codered1988/s2z63crL/

function drawBubbles() {
    
    let root = d3.hierarchy({ children: data })
        .sum(d => d.value);
    let nodes = pack(root).leaves().map(node => {
        const data = node.data;
        return {
            x: centerX + (node.x - centerX) * 3, 
            y: centerY + (node.y - centerY) * 3,
            r: 10, // for tweening
            radius: node.r, //original radius
            id: data.id,
            type: data.type,
            name: data.name,
            value: data.value,
        }
    });
    simulation.nodes(nodes).on('tick', ticked);
  
    node = svg.selectAll('.node')
        .data(nodes, d => d.id)
        .join(
            function(n){ // enter 

                enter = n.append('g')
                    .attr('class', 'node')
                        .call(d3.drag()
                            .on('start', (event, d) => {
                                if (!event.active) simulation.alphaTarget(0.2).restart();
                                d.fx = d.x;
                                d.fy = d.y;
                            })
                            .on('drag', (event, d) => {
                                d.fx = event.x;
                                d.fy = event.y;
                            })
                            .on('end', (event, d) => {
                                if (!event.active) simulation.alphaTarget(0);
                                d.fx = null;
                                d.fy = null;
                            }))
                // Create Circles 
                enter.append('circle')
                    .attr('id', d => d.id)
                    .attr('r', d => d.radius)
                    //.style('fill', d => scaleColor(d.type))
                    .style('fill', d => fill(d.type))
                    .attr("stroke", "black")
                    .style("stroke-width", 2)
                    .transition().duration(2000).ease(d3.easeElasticOut)
                            .tween('circleIn', (d) => {
                            console.log('tween');
                            let i = d3.interpolateNumber(d.r, d.radius);
                            return (t) => {
                                d.r = i(t);
                                simulation.force('collide', forceCollide);
                            }
                        })
                enter.append('clipPath')
                .attr('id', d => `clip-${d.id}`)
                .append('use')
                .attr('xlink:href', d => `#${d.id}`);
                
                // display text as circle icon
                enter.filter(d => !String(d.name).includes('img/')) 
                    .append('text')
                    .classed('node-icon', true)
                    .attr('clip-path', d => `url(#clip-${d.id})`)
                    .selectAll('tspan')
                    .data(d => d.name.split(';'))
                    .enter()
                        .append('tspan')
                        .attr('x', 0)
                        .attr('y',(d, i, nodes) => (13 + (i - nodes.length / 2 - 0.5) * 10))
                        .text(name => name);
        
                return enter;
            },
            
            update => update
                .attr("fill", "black")
                .attr("y", 0)
              .call(update => update.transition(t)
                .attr("x", (d, i) => i * 16)),
            
            
            exit => exit
                .attr("fill", "brown")
              .call(exit => exit.transition(t)
                .attr("y", 30)
                .remove())
                         );

    //simulation.nodes(nodes).alpha(1).restart();
    
}

在此先感谢您的帮助。

在力气泡图上添加/删除气泡的问题

0 个答案: