javascript - 在力气泡图上添加/删除气泡的问题
问题描述
我正在尝试创建一个动态气泡图,其中基于选定的过滤器添加/删除气泡。最终,数据将通过 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();
}
解决方案
推荐阅读
- http - http请求会自动重试tcp连接吗?
- php - 从 aws lambda 下载到 s3 存储桶后出现内部服务器错误,PHP
- vue.js - nativescript-vue 中的 * 前缀是什么意思?
- php - 如何使 Doctrine Migrations 在表名中添加引号?
- python - Mask R-CNN,多类
- mysql - 使用来自另一个表的新行和数据更新现有行
- sql - 基于组 ID 子集的时间戳列的组中的最后一行 - Postgres
- php - 在以逗号分隔的字符串中搜索准确的数字 PHP
- reactjs - React Native滚动视图无限重新渲染
- python-3.x - 如何在 python tkinter 中将 blit=true 用于动画子图