chart = { const width = 766; const height = 700; const chartArea = d3.select(html`

고빈도 인물

떠오르는 인물

신규 인물

`); //const svg = d3.select(html``); const svg = chartArea.selectAll("#target").append("svg") .style("width", width) .style("height", height); const max_level = tree_level(data); const max_distance = Math.min(width, height); const link_distance = (max_level > 1) ? max_distance * 0.2 / max_level : 0; const graph = build_graph(data, max_level, width, height); const nodes = graph.nodes; const links = graph.links; var force = d3.layout.force() .size([width, height]) .nodes(nodes).links(links) .linkDistance(link_distance) .linkStrength(0.95) .friction(0.95) .charge(-1000) .gravity(0.1) .on("tick", n=>{ 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("transform", function (d) { return `translate(${d.x}, ${d.y})`; }) }); var link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll(".link").data(links).enter().append("line") .attr("class", "link"); var node = svg.append("g") .selectAll(".node").data(nodes).enter().append("g") .html(function (d) { return d.svg; }); node.call(force.drag); force.start(); return chartArea.node(); }