Question

我想将几个力（forceX和forceY）分别应用于节点的几个子部分。

为了更具说明性，我将此JSON作为节点的数据：

[{
    "word": "expression",
    "theme": "Thème 6",
    "radius": 3
}, {
    "word": "théorie",
    "theme": "Thème 4",
    "radius": 27
}, {
    "word": "relativité",
    "theme": "Thème 5",
    "radius": 27
}, {
    "word": "renvoie",
    "theme": "Thème 3",
    "radius": 19
},
....
]

我想要的是将一些力量专门应用于以“Thème1”作为主题属性的节点，或“Thème2”值的其他力量等等......

我一直在查看源代码以检查我们是否可以将模拟节点的子部分分配给力，但我还没有找到它。

我总结说，我必须实现几个辅助d3.simulation()，并且只应用它们各自的子节点，以便处理我之前提到的力量。这是我在d3伪代码中想做的事情：

mainSimulation = d3.forceSimulation()
                        .nodes(allNodes)
                        .force("force1", aD3Force() )
                        .force("force2", anotherD3Force() )
cluster1Simulation = d3.forceSimulation()
                        .nodes(allNodes.filter( d => d.theme === "Thème 1"))
                        .force("subForce1", forceX( .... ) )
cluster2Simulation = d3.forceSimulation()
                        .nodes(allNodes.filter( d => d.theme === "Thème 2"))
                        .force("subForce2", forceY( .... ) )

但我认为考虑计算并不是最优的。

是否可以在模拟节点的子部分上施加力而无需创建其他模拟？

实施高积云'第二个解决方案：

我尝试过这样的解决方案：

var forceInit;
Emi.nodes.centroids.forEach( (centroid,i) => {

    let forceX = d3.forceX(centroid.fx);
    let forceY = d3.forceY(centroid.fy);
    if (!forceInit) forceInit = forceX.initialize;  
    let newInit = nodes => { 
        forceInit(nodes.filter(n => n.theme === centroid.label));
    };
    forceX.initialize = newInit;
    forceY.initialize = newInit;

    Emi.simulation.force("X" + i, forceX);
    Emi.simulation.force("Y" + i, forceY);      
});

我的质心数组可能会发生变化，这就是为什么我必须采用动态方式来实现我的子力量。但是，我最终通过模拟滴答声出现了这个错误：

09:51:55,996 TypeError: nodes.length is undefined
- force() d3.v4.js:10819
- tick/<() d3.v4.js:10559
- map$1.prototype.each() d3.v4.js:483
- tick() d3.v4.js:10558
- step() d3.v4.js:10545
- timerFlush() d3.v4.js:4991
- wake() d3.v4.js:5001

我得出结论，过滤后的数组未分配给节点，我无法理解原因。 PS：我用console.log检查：nodes.filter（...）确实返回一个填充数组，所以这不是问题的起源。

Answer 1

要将力仅应用于节点子集，您基本上必须选择：

实施你自己的力量，这听起来并不困难，因为

力只是一个修改节点位置或速度的函数;

- 或者，如果你想坚持标准力量 -

创建标准力并覆盖其force.initialize()方法，

将此节点数组分配给此力。

通过过滤节点并仅分配您感兴趣的节点，您可以控制力应该对哪些节点起作用：

// Custom implementation of a force applied to only every second node
var pickyForce = d3.forceY(height);

// Save the default initialization method
var init = pickyForce.initialize; 

// Custom implementation of .initialize() calling the saved method with only
// a subset of nodes
pickyForce.initialize = function(nodes) {
    // Filter subset of nodes and delegate to saved initialization.
    init(nodes.filter(function(n,i) { return i%2; }));  // Apply to every 2nd node
}

以下代码段通过使用节点子集初始化d3.forceY来演示第二种方法。从整个随机分布的圆圈中，每隔一秒就会施加一个力，从而将其移动到底部。

var width = 600;
var height = 500;
var nodes = d3.range(500).map(function() {
  return {
    "x": Math.random() * width,
    "y": Math.random() * height 
  };
});

var circle = d3.select("body")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .selectAll("circle")
  .data(nodes)
  .enter().append("circle")
    .attr("r", 3)
    .attr("fill", "black");

// Custom implementation of a force applied to only every second node
var pickyForce = d3.forceY(height).strength(.025);

// Save the default initialization method
var init = pickyForce.initialize; 

// Custom implementation of initialize call the save method with only a subset of nodes
pickyForce.initialize = function(nodes) {
    init(nodes.filter(function(n,i) { return i%2; }));  // Apply to every 2nd node
}

var simulation = d3.forceSimulation()
		.nodes(nodes)
    .force("pickyCenter", pickyForce)
    .on("tick", tick);
    
function tick() {
  circle
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
}

<script src="https://d3js.org/d3.v4.js"></script>

Answer 2

我修复了我自己的高积云实现＆＃39;第二个解决方案：

在我的情况下，我必须为每个质心创建两个力。似乎我们不能为所有forceX和forceY函数共享相同的初始值设定项。

我必须为循环中的每个质心创建局部变量：

Emi.nodes.centroids.forEach((centroid, i) => {

    let forceX = d3.forceX(centroid.fx);
    let forceY = d3.forceY(centroid.fy);
    let forceXInit = forceX.initialize;
    let forceYInit = forceY.initialize;
    forceX.initialize = nodes => {
        forceXInit(nodes.filter(n => n.theme === centroid.label))
    };
    forceY.initialize = nodes => {
        forceYInit(nodes.filter(n => n.theme === centroid.label))
    };

    Emi.simulation.force("X" + i, forceX);
    Emi.simulation.force("Y" + i, forceY);
});

D3.js中节点上的部分力

2 个答案: