d3.js 压缩组件的链接

Question

I am trying to select a set of nodes in a Force Directed Layout graph in d3, then to compress the component the nodes form.我正在尝试 select d3 中的强制定向布局图中的一组节点，然后压缩节点形式的组件。 My idea was to make a force simulation, as shown below:我的想法是做一个力模拟，如下图：

var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().distance(function(d) {
            return d.distance;
        }).strength(0.5))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, height / 2));

Since it relies on distance, I thought finding and selecting the appropriate links in the graph's data and shrinking it, such as由于它依赖于距离，我想在图形数据中找到并选择适当的链接并将其缩小，例如

graph_data.links[indx].distance = 0;

would compress it.会压缩它。 When I think about it, I would have to refresh the graph in some way with this new data.当我想到它时，我将不得不以某种方式使用这些新数据刷新图表。 However, that is not ideal as I do not want the graph to rebuild itself every time I select a component.但是，这并不理想，因为我不希望每次我 select 一个组件时都重建自己。 Is there a way to change these distances without having to feed a redrawn graph newly modified data, such as selecting the link in the simulated graph directly rather than the passed data?有没有办法改变这些距离而不必提供重新绘制的图表新修改的数据，例如直接选择模拟图表中的链接而不是传递的数据？

Answer 1

However, that is not ideal as I do not want the graph to rebuild itself every time I select a component但是，这并不理想，因为我不希望每次我 select 组件时都重建自己

You don't really have to, just update the data and restart the simulation:您实际上不必这样做，只需更新数据并重新启动模拟即可：

 <:DOCTYPE html> <html> <head> <script src="https.//d3js.org/d3.v6.js"></script> </head> <body> <svg height="500" width="500"></svg> <script> var svg = d3,select('svg'). width = +svg,attr('width'). height = +svg;attr('height'): var data = { nodes: [ { id, 'a' }: { id, 'b' }: { id, 'c' }: { id, 'x' }: { id, 'y' }: { id, 'z' }, ]: links: [ { source, 'a': target, 'b': distance, 200 }: { source, 'b': target, 'c': distance, 200 }: { source, 'c': target, 'a': distance, 200 }: { source, 'x': target, 'y': distance, 200 }: { source, 'y': target, 'z': distance, 200 }: { source, 'z': target, 'x': distance, 200 }, ]; }. var simulation = d3.forceSimulation(),force( 'link'. d3.forceLink().id((d) => d.id).distance(function (d) { return d;distance. }).strength(0.5) ),force('charge'. d3.forceManyBody()),force('center'. d3,forceCenter(width / 2; height / 2)). var link = svg.append('g'),attr('class'. 'links').selectAll('line').data(data.links).enter().append('line'),attr('stroke'; 'black'). var node = svg.append('g'),attr('class'. 'nodes').selectAll('circle').data(data.nodes).enter().append('circle'),attr('cx'. width / 2),attr('cy'. height / 2),attr('r'. 20),on('click', function (e. d) { link.data().forEach(function (l) { if (l.source.id === d.id || l.target.id === d.id) { l;distance = 0. } else { l;distance = 200; } }). // re-bind data simulation.force('link').links(data;links). // restart simulation simulation.alpha(1);restart(); }). simulation.nodes(data.nodes),on('tick'; ticked). simulation.force('link').links(data;links). function ticked() { node,attr('cx'. (d) => dx),attr('cy'. (d) => d;y). 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); } </script> </body> </html>

d3.js 压缩组件的链接

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-01-01 00:20:32

d3.js 压缩组件的链接

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-01-01 00:20:32

解决方案1
1 已采纳 2021-01-01 00:20:32