#javascript #d3.js
Вопрос:
Я немного растерян. Я создал D3.js прототип принудительного графика. Я хочу добавить функцию, которая увеличивает размер меньших узлов во время события наведения. Который должен включать размер самого узла и соответствующий идентификатор узла.
- Первой попыткой было добавить
transform: scale(2)и перейти в класс circle.
Это приведет к увеличению всех узлов по умолчанию и только узла, без содержимого. Чтобы фактически увеличить меньшие узлы и содержимое, я добавил условие, так как пытаюсь понять, как учитывать размер узла и содержимое. 🙁
Вопрос: Как увеличить размер и содержимое узла?
lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset="utf-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;!-- d3.js framework --gt; lt;script src="https://d3js.org/d3.v7.js"gt;lt;/scriptgt; lt;titlegt;linkDistancelt;/titlegt; lt;/headgt; lt;stylegt; body { height: 100%; background: #e6e7ee; overflow: hidden; margin: 0px; } circle { cursor: pointer; fill: whitesmoke; stroke: white; stroke-width: 2px; transition: fill 0.5s ease; } circle:hover { fill: #3498db; transform: scale(2); transition: transform 0.5s ease; } .small { fill: #3498db; transform: scale(2); transition: transform 0.5s ease; } lt;/stylegt; lt;bodygt; lt;svg id="svg"gt; lt;/svggt; lt;scriptgt; var graph = { "nodes": [ { "id": 0, "size": 40 }, { "id": 1, "size": 20 }, { "id": 2, "size": 40 }, { "id": 3, "size": 20 }, { "id": 4, "size": 20 }, { "id": 5, "size": 20 } ], "links": [ { "source": 0, "target": 1, "distance": "10" }, { "source": 0, "target": 2, "distance": "125" }, { "source": 0, "target": 3, "distance": "10" }, { "source": 0, "target": 4, "distance": "10" }, { "source": 0, "target": 5, "distance": "10" } ] } var svg = d3.select("svg") .attr("class", "canvas") .attr("width", window.innerWidth) .attr("height", window.innerHeight) .call(d3.zoom().on("zoom", function (event) { svg.attr("transform", event.transform) })) .append("g") var linksContainer = svg.append("g").attr("class", linksContainer) var nodesContainer = svg.append("g").attr("class", nodesContainer) var force = d3.forceSimulation() .force("link", d3.forceLink().distance(linkDistance).strength(0.1)) .force("charge", d3.forceManyBody().strength(-100)) .force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2)) .force("collision", d3.forceCollide().radius(setSize)) function linkDistance(d) { return d.distance; } initialize() function initialize() { link = linksContainer.selectAll(".link") .data(graph.links) .join("line") .attr("class", "link") .style("stroke", "black") .style("stroke-width", 1) node = nodesContainer.selectAll(".node") .data(graph.nodes, d =gt; d.id) .join("g") .attr("class", "node") .call(d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded) ) .on("mouseenter", mouseEnter) //.on("mouseleave", mouseLeave) node.selectAll("circle") .data(d =gt; [d]) .join("circle") .attr("r", setSize) node.append("text") .attr("dominant-baseline", "central") .attr("text-anchor", "middle") .attr("font-size", 15) .attr("pointer-events", "none") .text(function (d) { return d.id }) force .nodes(graph.nodes) .on("tick", ticked); force .force("link") .links(graph.links) } function ticked() { // update link positions link .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", function (d) { return d.target.y; }); // update node positions node .attr("transform", function (d) { return "translate(" d.x ", " d.y ")"; }); } function dragStarted(event, d) { if (!event.active) force.alphaTarget(1).restart(); d.fx = d.x; d.fy = d.y; PosX = d.x PosY = d.y } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragEnded(event, d) { if (!event.active) force.alphaTarget(0); d.fx = undefined; d.fy = undefined; } function setSize(d) { return d.size } function mouseEnter(event, d) { if (d.size lt; 40) { var circle = d3.select(this) } } function mouseLeave(event, d) { } lt;/scriptgt; lt;/bodygt; lt;/htmlgt;