小编And*_*-lo的帖子

我正在使用d3-force布局构建一个“弹簧” 。我想通过用户输入操纵它的属性，如“强度”和“距离”。为此，我目前正在使用“输入范围滑块”。为了更好地理解，我在 codepen 上建立了一个工作草案，其中这个问题与：http ://codepen.io/bitHugger/pen/XNqGNE?editors=1010

HTML：

<input id="strengthElem" step="0.1" type="range" min="0" max="2"/>

我想做这样的事件处理：

let strengthElem = window.document.getElementById('strengthElem');
let strength;

strengthElem.addEventListener('click', function(evt) {
  strength = strengthElem.value;
  console.log('strength', strength);
}, false);

现在，当与范围滑块发生某些交互时，我想重新启动或重新计算 d3.simulation 对象。这是我目前的模拟：

let simulation = d3.forceSimulation().nodes(nodes)
    .force("link", d3.forceLink()
        .id(function(d) { return d.index; })
        .strength(function(d) { return 2; })
        .distance(function(d) { return 2; }))
    .force("charge", d3.forceManyBody());

对于强度和距离，这些值目前是硬编码的。我想将其更改为例如：

.strength(function(d) { return strength; })
.distance(function(d) { return distance; })

我试图设置一个 d3.call().on() 函数，但无法让它工作。我想知道如何根据 unser 输入操作模拟，这发生在 force() 函数之外/在 svg 容器之外。

可悲的是，我无法让某些东西正常工作，我不知道如何设置一个适当的 d3 …