0

我正在创建一个与多个滑块相关联的 D3 力导向可视化。当滑块输入改变时，变量 cx 和 cy 改变，节点移动到指定位置。这目前正在工作，但不是从初始位置过渡到下一个位置，而是节点“刷新”并从窗口左上角的新起始位置移动（丑陋）。这是我的可视化代码：

  const simulation = d3.forceSimulation(data)
          .force("charge", d3.forceManyBody().strength(5))
          .force('collision', d3.forceCollide().radius(3))
          .force("y", d3.forceY(function(d) { return d.cy*height; }).strength(0.1))
          .force("x", d3.forceX(function(d) { return d.cx*width; }).strength(0.1));
          
    const g = svg.selectAll('g.node')
      .data(simulation.nodes())
      .join('g')
      .attr('class', 'node')
      .call( g => g
        .append('circle')
          .attr('r', 2)
          .attr('fill', function(d) { return d.budget_color; }));
          
simulation.on("tick", () => g.attr('transform', d => `translate(${ d.x },${ d.y })`) )

我还应该注意，我是通过 R shiny 运行它的，并且数据集是通过 r2d3 包与 JS 共享的。我在以下链接中找到了一些类似的主题，但无法使更改生效。

D3 - 如何在数据值更改时更新力模拟

这是我尝试实现上述（使用'shiny：inputchanged'）来检测滑块何时更新为闪亮，但我没有让它工作。

$(document).on('shiny:inputchanged', function(d) {
  console.log("Input changed!");
  
  simulation
    .alpha(0.5)
    .alphaTarget(0.3)
    .restart();

  simulation.force("x").initialize(data);
  simulation.force("y").initialize(data);
  simulation.force("collision").initialize(data);
})
4

0 回答 0