var nodes = [{name: "A"}, {name: "B"}, {name: "C"}]; var links = [{source: "A", target: "B"}, {source: "B", target: "C"}]; var width = 500, height = 500; var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.name })) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width/2, height/2)); var link = svg.selectAll("line") .data(links) .enter().append("line"); var node = svg.selectAll(".node") .data(nodes) .enter().append("g").attr("class", "node") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); node.append("circle").attr("r", 10).style("fill", "white"); node.append("text").attr("x", 13).attr("dy", ".35em").text(function(d) { return d.name }); simulation.nodes(nodes).on("tick", ticked); simulation.force("link").links(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(" + d.x + "," + d.y + ")" }); } function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }
var width = 500, height = 500; var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); var data = { name: "root", children: [ { name: "A", children: [ { name: "B" }, { name: "C" } ] }, { name: "D", children: [ { name: "E" }, { name: "F" } ] }, { name: "G", children: [ { name: "H" }, { name: "I" } ] } ] }; var root = d3.hierarchy(data); var links = root.links(); var nodes = root.descendants(); var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id })) .force("charge", d3.forceManyBody().strength(-200).distanceMax(200)) .force("center", d3.forceCenter(width/2, height/2)) .force("r", d3.forceRadial(function(d) { return d.depth * 100 })); var link = svg.selectAll(".link") .data(links) .enter().append("line").attr("class", "link"); var node = svg.selectAll(".node") .data(nodes) .enter().append("g").attr("class", "node") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); node.append("circle").attr("r", 20).style("fill", "white"); node.append("text").text(function(d) { return d.data.name }); simulation.nodes(nodes).on("tick", ticked); simulation.force("link").links(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(" + d.x + "," + d.y + ")" }); } function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }This code creates a force-directed decision tree with nine nodes and eight links. The simulation is set up with a forceLink, forceManyBody, forceCenter, and forceRadial. The data is organized as a hierarchical tree using the d3.hierarchy function. The link data is bound to line elements, and the node data is bound to groups containing text and circle elements. The ticked function updates the positions of the line and group elements based on the simulation. The drag functions are used to enable node dragging.