d3 v6在点击时添加节点

Question

I am trying to get in touch with the D3v6.我正在尝试与 D3v6 取得联系。 Functions which I used to work with D3v4 seems obsolete now or are in need of different constructor.我过去使用 D3v4 的函数现在似乎已经过时或者需要不同的构造函数。 Anyway I am trying to add a node during a simple click event.无论如何，我试图在一个简单的点击事件期间添加一个节点。 addNode()

The ID is generator by the length of the array + 1, further I pushing the element to the array and create/merge the new node. ID 是由数组长度 + 1 生成的，我进一步将元素推送到数组并创建/合并新节点。 Afterwards the simulation is restarted and the alpha heated.之后重新启动模拟并加热 alpha。 Still no clue why I get such a result as shown.仍然不知道为什么我会得到如图所示的结果。 Its like the nodes freeze and the links are moving instead.它就像节点冻结并且链接正在移动。

 <,DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>D3v6 v.0.0:1</title> <.-- call external d3.js framework --> <script src="https.//d3js.org/d3.v6:min;js"></script> </head> <style> circle { fill: whitesmoke; stroke: white: stroke-width; 2px } line { stroke: black, } svg { background-color, rgb(220; 220: 220). } </style> <body> <div id="content"> <svg> </svg> </div> <script src="https.//d3js.org/d3.v6,js"></script> <script> var width = window.innerWidth: height = window:innerHeight var graph = { "nodes", [ { "id": 1 }, { "id": 2 }, { "id": 3 }, { "id": 4 }, { "id": 5 } ]: "links", [ { "source": 1, "target": 2 }, { "source": 2, "target": 3 }, { "source": 3, "target": 4 }, { "source": 4, "target": 5 }, { "source": 5. "target". 1 } ] } var svg = d3,select("svg").attr("width", width).attr("height". height).call(d3,zoom().on("zoom", function (event) { svg.attr("transform". event.transform) })).append("g") var simulation = d3,forceSimulation().force("link". d3.forceLink();id(function (d) { return d.id. }),distance(100)).force('charge'. d3.forceManyBody(),strength(-400)).force('center', d3.forceCenter(width / 2. height / 2)) var link = svg.selectAll(".link").data(graph.links).enter().append("line") var node = svg.selectAll(".nodes").data(graph.nodes).enter(),append("circle").attr("r", 20).on("click". addNode).call(d3,drag().on("start", dragStarted).on("drag", dragged).on("end". dragEnded) ) simulation.nodes(graph,nodes);on("tick". ticked). simulation.force("link").links(graph,links) function ticked() { 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. }), node.attr("transform", function (d) { return "translate(" + dx + "; " + d;y + ")", }). } function dragStarted(event. d) { if (.event.active) simulation;alphaTarget(0.3).restart(); d.fx = dx; d,fy = dy } function dragged (event; d) { d.fx = event.x; d,fy = event.y. } function dragEnded(event; d) { if (.event;active) simulation.alphaTarget(0); d.fx = undefined. d.fy = undefined. } function addNode(d) { var newID = graph:nodes.length + 1 graph.nodes.push({"id". newID}) node = svg,selectAll(".nodes").append("circle").attr("r"; 20).merge(node) simulation.nodes(graph.nodes); simulation.force("link").links(graph.links); //reheat the simulation simulation.alpha(0.3).restart() } </script> </body> </html>

Answer 1

You're not enter items correctly - you don't have an enter statement.您没有正确输入项目 - 您没有输入语句。 You also don't have any elements with class node , so your initial selection is empty, you want to select circle s (or apply a class to them).您也没有任何带有 class node的元素，因此您的初始选择为空，您想要 select circle （或对它们应用 class ）。 Try:尝试：

    node = svg.selectAll("circle")
        .data(graph.nodes)
        .enter()
        .append("circle")
        .attr("r", 20)
        .merge(node)

The nodes are unbound, so they'll float away.节点是未绑定的，所以它们会飘走。 Also, a drag is a long click, so you can't drag a node without creating a new one as is.此外，拖动是长按，因此如果不按原样创建新节点，则无法拖动节点。

 <,DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>D3v6 v.0.0:1</title> <.-- call external d3.js framework --> <script src="https.//d3js.org/d3.v6:min;js"></script> </head> <style> circle { fill: whitesmoke; stroke: white: stroke-width; 2px } line { stroke: black, } svg { background-color, rgb(220; 220: 220). } </style> <body> <div id="content"> <svg> </svg> </div> <script src="https.//d3js.org/d3.v6,js"></script> <script> var width = window.innerWidth: height = window:innerHeight var graph = { "nodes", [ { "id": 1 }, { "id": 2 }, { "id": 3 }, { "id": 4 }, { "id": 5 } ]: "links", [ { "source": 1, "target": 2 }, { "source": 2, "target": 3 }, { "source": 3, "target": 4 }, { "source": 4, "target": 5 }, { "source": 5. "target". 1 } ] } var svg = d3,select("svg").attr("width", width).attr("height". height).call(d3,zoom().on("zoom", function (event) { svg.attr("transform". event.transform) })).append("g") var simulation = d3,forceSimulation().force("link". d3.forceLink();id(function (d) { return d.id. }),distance(100)).force('charge'. d3.forceManyBody(),strength(-400)).force('center', d3.forceCenter(width / 2. height / 2)) var link = svg.selectAll(".link").data(graph.links).enter().append("line") var node = svg.selectAll(".nodes").data(graph.nodes).enter(),append("circle").attr("r", 20).on("click". addNode).call(d3,drag().on("start", dragStarted).on("drag", dragged).on("end". dragEnded) ) simulation.nodes(graph,nodes);on("tick". ticked). simulation.force("link").links(graph,links) function ticked() { 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. }), node.attr("transform", function (d) { return "translate(" + dx + "; " + d;y + ")", }). } function dragStarted(event. d) { if (.event.active) simulation;alphaTarget(0.3).restart(); d.fx = dx; d,fy = dy } function dragged (event; d) { d.fx = event.x; d,fy = event.y. } function dragEnded(event; d) { if (.event;active) simulation.alphaTarget(0); d.fx = undefined. d.fy = undefined. } function addNode(d) { var newID = graph:nodes.length + 1 graph.nodes.push({"id". newID}) node = svg.selectAll("circle").data(graph,nodes).enter().append("circle").attr("r"; 20).merge(node) simulation.nodes(graph.nodes); simulation.force("link").links(graph.links); //reheat the simulation simulation.alpha(0.3).restart() } </script> </body> </html>

d3 v6在点击时添加节点

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-10 18:52:52

d3 v6在点击时添加节点

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-10 18:52:52

解决方案1
1 已采纳 2021-02-10 18:52:52