Поведение перетаскивания, не нацеленное на текст узла, когда это предполагалось ⇐ CSS

[Anonymous]

Мне удалось удалить функцию перехода к текстовой функции, и поведение перетаскивания работало на узлах, но объединение обоих вариантов поведения, похоже, привело к потере поведения перетаскивания текстового узла. Мне любопытно, завершаю ли я симуляцию технически после перехода к тексту, и поэтому поведение перетаскивания для симуляции неэффективно. Мне также интересно, может быть, я нацеливаюсь на текстовый узел только на текст, независимый от узла, или область для перетаскивания текста настолько мала, что невозможно захватить нужную точку. Если у кого-нибудь есть отзывы о том, где мой код идет не так, я был бы очень признателен за понимание. Я новичок и во многом полагаюсь на ChatGPT, чтобы создать структуру записи и потом ее настроить.
function createVisualization() {
const margin = { top: 20, right: 20, bottom: 20, left: 20 };
const svgWidth = window.innerWidth - margin.left - margin.right;
const svgHeight = window.innerHeight - margin.top - margin.bottom;

svg = d3.select("#visualization")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);

simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody().strength(-150))
.force("center", d3.forceCenter(svgWidth / 2, svgHeight / 2))
.force("collide", d3.forceCollide().radius(20))
.force("x", d3.forceX(svgWidth / 2).strength(0.010))
.force("y", d3.forceY(svgHeight / 2).strength(0.05));

const link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link");

const node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 0);

simulation.on("tick", () => {
link.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);

node.attr("cx", d => d.x)
.attr("cy", d => d.y);

if (simulation.alpha() < 0.001) {
node.transition().duration(500)
.attr("r", 0)
.attr("opacity", 0)
.remove()
.end()
.then(() => {
const nodeText = svg.selectAll(".node-text")
.data(nodes)
.enter().append("text")
.attr("class", "node-text")
.attr("x", d => d.x)
.attr("y", d => d.y)
.text(d => d.id)
.style("opacity", 0)
.transition().duration(600)
.style("opacity", 1)
.call(drag(simulation)); // Add drag behavior after text transition
});
}
});
}

function updateVisualization() {
const svgWidth = window.innerWidth;
const svgHeight = window.innerHeight;

svg.attr("width", svgWidth)
.attr("height", svgHeight);

simulation.force("center", d3.forceCenter(svgWidth / 2, svgHeight / 2));
simulation.alpha(1).restart();
}

function drag(simulation) {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}

function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}

function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}

return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}

createVisualization();

window.addEventListener("resize", updateVisualization);


Подробнее здесь: https://stackoverflow.com/questions/781 ... n-intended