fixed missing collisions and drag on newly added apps (#16891)
Costa Tsaousis committed
Jan 31, 2024 at 14:58 UTC
cc8e419031a1985bbf9c241a16765b2222d4071e
1 file changed
+17
-32
collectors/network-viewer.plugin/viewer.html
+17
-32
@@ -330,33 +330,32 @@
330
// Initialize new elements
331
appEnter.each(function (d) {
332
const group = d3.select(this);
333
- const oldPos = positionsMap.get(d.name) || { x: cw, y: ch };
334
-
335
- d.x = oldPos.x;
336
- d.y = oldPos.y;
337
-
333
const pieData = pie(d.d3.pie);
339
- const radius = d.d3.size;
334
335
group.selectAll('path')
336
.data(pieData)
337
.enter().append('path')
338
.transition()
345
- .attr('d', arc.innerRadius(0).outerRadius(radius))
339
.attr('fill', (d, i) => pieColors(i));
340
341
group.append('text')
342
.text(d => d.name)
343
.attr('text-anchor', 'middle')
351
- .attr('y', radius + 10)
344
.style('font-family', theme.appFontFamily)
345
.style('font-size', theme.appFontSize)
346
.style('font-weight', theme.appFontWeight)
347
.style('fill', theme.appFontColor);
348
});
349
358
- // Update selection
359
- app.each(function (d) {
350
+ // Transition for new elements
351
+ appEnter.transition()
352
+ .attr('transform', d => `translate(${d.d3.x}, ${d.d3.y})`);
353
+
354
+ // Merge the enter and update selections
355
+ const mergedApp = appEnter.merge(app);
356
+
357
+ // Update saved positions
358
+ mergedApp.each(function (d) {
359
const group = d3.select(this);
360
const oldPos = positionsMap.get(d.name) || { x: cw, y: ch };
361
@@ -369,16 +368,10 @@
368
.attr('d', arc.innerRadius(0).outerRadius(d.d3.size));
369
370
group.select('text')
371
+ .transition()
372
.attr('y', d.d3.size + 10);
373
});
374
375
- // Transition for new elements
376
- appEnter.transition()
377
- .attr('transform', d => `translate(${d.d3.x}, ${d.d3.y})`);
378
-
379
- // Merge the enter and update selections
380
- const mergedApp = appEnter.merge(app);
381
-
375
// Apply the drag behavior to the merged selection
376
mergedApp.call(d3.drag()
377
.on('start', dragstarted)
@@ -421,21 +414,13 @@
414
415
const app = updateApps(svg, data, w, h, borderPadding, theme);
416
424
- if(initial) {
425
- simulation = d3.forceSimulation(data)
426
- //.force('center', d3.forceCenter(cw, ch).strength(1))
427
- .force("x", d3.forceX(d => d.d3.x).strength(0.05))
428
- .force("y", d3.forceY(d => d.d3.y).strength(0.05))
429
- //.force("charge", d3.forceManyBody().strength(-0.05))
430
- .force("collide", d3.forceCollide(d => d.d3.size * 1.1 + 15).strength(1))
431
- .on('tick', ticked);
432
- }
433
- else {
434
- simulation.nodes(data)
435
- .force("x", d3.forceX(d => d.d3.x).strength(0.02))
436
- .force("y", d3.forceY(d => d.d3.y).strength(0.02))
437
- .alpha(1).restart();
438
- }
417
+ simulation = d3.forceSimulation(data)
418
+ //.force('center', d3.forceCenter(cw, ch).strength(1))
419
+ .force("x", d3.forceX(d => d.d3.x).strength(0.05))
420
+ .force("y", d3.forceY(d => d.d3.y).strength(0.05))
421
+ //.force("charge", d3.forceManyBody().strength(-0.05))
422
+ .force("collide", d3.forceCollide(d => d.d3.size * 1.1 + 15).strength(1))
423
+ .on('tick', ticked);
424
425
function ticked() {
426
app.attr('transform', d => `translate(${d.x}, ${d.y})`);