Question

该 赏金 到期 三天之内. 对这一问题的回答有资格获得 +250 名誉赏金。 老县城 正在寻找 正解:

Keen to fix these 3 charts -- so the new force aspects are working -- ideally similar -- so when you click on the node it adjusts the charge causing a temporarily ripple throughout -- ideally also look into stabilizing the chart so bubbles don't collide with each other -- or form or float off the edge of the chart(s) -- /Bubble Chart 1 d3v4 bubble force chart with charge changes on click -- latest conversion of v4. jsfiddle.netf64qe950 -- 旧版3 -- jsfiddle.net497tmhu0

/混合派与气泡d3v4混合豆芽和气泡图 -- 但气泡不工作？-- 最新转换的v4 jsfiddle.net30odhpft -- 旧版3 jsfiddle.netjfxoy7wr

/力关系图1 d3v4力图升级清理--最新转换v4力图 jsfiddle.netr376fg0d -- 旧版3 jsfiddle.net695ocnv73

我正在研究各种类型的图表，其中包括力的功能 -- 我已经尝试升级3个不同的图表，使用这个 -- 但他们都遭受相同或类似的问题 -- 在力的应用中有一个突破，但这些图表总是感觉不稳定。

/tweak on the charge如果用户点击中心节点热衷于让节点上的电荷暂时改变，以创建一种类型的波纹。

/图表的稳定性力也感觉不稳定，因为节点不会保持到图表本身的边界。

---

• 关系力图

我已经重构了旧的图表 - 和数据配置生成节点链接，使这个图表的功能。

• 图案中的图片没有正确地放在圆圈中，是尺寸不对还是位移？
• 需要为项目使用可读标签而不是ID。
• 如果一个人点击或悬停在一个节点上，我想改变电荷，以引起一个波纹效应。

• 热衷于稳定这个图表，所以它不会漂浮在画布的边缘。

  

https:/jsfiddle.netL9xodt1z。

仿真代码为

    var simulation1 = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) {
        return d.id;
      }).distance(50))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 3, height / 2));

在创建节点的最后，有一个关于拖动的调用。

      .call(d3.drag()
        .on("drag", dragged1)
        .on("end", dragended1))

这些函数看起来像这样

    function dragged1(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

    function dragended1(d) {
      d.fx = null;
      d.fy = null;
    }

勾选功能如下

    function ticked1() {
      link1
        .attr("x1", function(d) {
          return d.source.x;
        })
        .attr("y1", function(d) {
          return d.source.y;
        })
        .attr("x2", function(d) {
          return d.target.x;
        })
        .attr("y2", function(d) {
          return d.target.y;
        });
      node1
        .attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        });

      text1
        .attr("x", function(d) {
          return d.x;
        })
        .attr("y", function(d) {
          return d.y;
        });
    }

---

-混合图

这是最新的混合图表代码--但气泡是画在自己的顶部--而且气泡的占位符也不对齐？

• 气泡应该在dougnut图表的中点周围生成。
• 气泡不应该画在上面

• 如果一个气泡被点击或悬停--电荷应该会有一点变化--导致一个波纹。

  

https:/jsfiddle.netLeay82zc1

本图表的强制代码

var force = d3.forceSimulation(data)
  .force("link", d3.forceLink()
    .id(function(d) {
      return d.label
    })
    .distance(function(d) {
      return 10
    }).strength([-10]))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

force.restart(); //start

需要打勾吗，有什么作用？

---

-- 泡泡图

我已经完成了气泡图的转换 -- 但我想稳定这个图表。

• 这样气泡就不会叠加在一起了。
• 气泡不漂浮或呈现在svg的边缘上。
• 如果点击一个气泡，电荷就会暂时改变，从而产生波纹。

https:/jsfiddle.netyec1zns9

这里是当前的力方面--很想有人解释一下chargeecenterdistance参数是什么意思--配置这些或其配置的最佳方式是什么。

• 勾的作用是什么？

• 为什么力在这里工作--当它在制作点的最后没有被调用时？".call(d3.drag()); /to drag the nodes "没有被调用？添加forceSimulation是否只影响svg和在其上绘制的任何东西？

  var force = d3.forceSimulation(data)
    .force("link", d3.forceLink()
      .id(function(d) {
        return d.label
      })
      .distance(function(d) {
        return 10
      }).strength([-10]))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));
  
  force.restart(); //start
  
  force.on("tick", function() { //update the position of lines
  
    //update the position of nodes
    svg_nodes.attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      });
  
  });
  

---