我正在尝试创建一个动态气泡图,其中根据选定的过滤器添加/删除气泡。最终将通过 ajax 从我的服务器调用数据,但目前我只有一组对象,我可以使用按钮添加或删除这些对象。
我有两个问题暂时无法解决。
可以在此处找到完整代码 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();
}
在此先感谢您的帮助。