Question

我已经在堆栈上查看了不同的链接距离，看起来为了改变链接距离你需要实现一个函数，然后传递它来动态分配链接距离：

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

然后我认为我能够传递给svg而是返回函数错误，而不是现有的linkdistance或距离

var link = svg.selectAll(".link")
  .data(bilinks)    
  .enter().append("path")
  .style("stroke", "#6b7071")    //gunmetal grey link
  .attr("class", "link")
  .linkDistance(linkDistance)
  .attr("fill", "none")

使用文档中的.linkDistance：https://github.com/d3/d3/blob/master/API.md#forces-d3-force理想情况下，我想使用数据修改链接距离，电荷，力和链接颜色等参数，就像我对点的颜色所做的那样，我相信我对如何正确地做到这一点缺乏了解。例如，在最后一行代码中，如果我要从：改为

.style("stroke", "#6b7071")    //gunmetal grey link

.style("stroke", function(d) { return color(d.group);})

链接颜色是一种颜色，而不是基于该组我预期的39种颜色。此外，我也尝试了

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

更新：我不确定长度的数据是在链接和bilinks的数组中，所以我可以引用距离但是似乎无法使用数组中的值，但console.log显示它正确存储

CODE

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}



</style>
<svg width="15000" height="15000"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

//change background color to black
backgroundColor = d3.rgb('#000000')
d3.select("body").style("background-color", backgroundColor)

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

//var color = d3.scaleOrdinal(d3.schemeCategory20);

 var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().distance(500).strength(0.1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));


d3.json("hc7data.json", function(error, graph) {
  if (error) throw error;


  var nodes = graph.nodes,
      nodeById = d3.map(nodes, function(d) { return d.id; }),
      links = graph.links,
      bilinks = [];


//get graphics to make color scale us scaleOrdinal if every color chosen
  var color = d3.scaleOrdinal()  
      .domain([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40])
      .range(["#af1f45", "#be4f5e","#cd767c","#dc9d9e","#ecc9c8","#fbdbe9","#f7bbd5","#f49ac1","#f179ae","#ef509c",
      "#e3d4e4","#cdb1cf","#9a5699","#b990ba", "#a973a9","#d6eaf3","#b0daeb","#8acce4","#5ebfde","#00a5db","#6dbe46","#e0efd4",
      "#c3e0ae","#a7d48b","#8cc866","#fff2d1","#ffe8a8","#ffdf80","#ffd751","#fecf07","#fee1c9","#fcc79c","#faae74","#f69d58",
      "#f7964a","#fde3d9","#fcccbc","#f58870","#f9b4a0","#f79e87"]);


  links.forEach(function(link) {
    var s = link.source = nodeById.get(link.source),
        t = link.target = nodeById.get(link.target),
        i = {}, // intermediate node
        linkDist = link.distance;
    nodes.push(i);
    //console.log(linkDist);
    links.push({source: s, target: i, linkDist:linkDist}, {source: i, target: t, linkDist:linkDist });
    bilinks.push([s, i, t,linkDist]);
  });

  var link = svg.selectAll(".link")
    .data(bilinks)  
    .enter().append("path")
    .style("stroke", "#6b7071")    //gunmetal grey
    .attr("class", "link")
    .attr("fill", "none")



  var node = svg.selectAll(".node")
    .data(nodes.filter(function(d) { return d.id; }))
    .enter().append("circle")
      .attr("class", "node")
      //change circle size according to new function
      .attr("r", function(d) {return d.size})
      .attr("fill", function(d) { return color(d.group); })
      .style("stroke", "#000000")
      //.style("stroke", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  node.append("title")
      .text(function(d) { return d.id; });

  simulation
      .nodes(nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(links);

  function ticked() {
    link.attr("d", positionLink);
    node.attr("transform", positionNode);
  }
});




function positionLink(d) {
  return "M" + d[0].x + "," + d[0].y
       + "S" + d[1].x + "," + d[1].y
       + " " + d[2].x + "," + d[2].y;
}

function positionNode(d) {
  return "translate(" + d.x + "," + d.y + ")";
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x, d.fy = d.y;
}

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

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null, d.fy = null;
}



</script>

json doc的样本

{
  "nodes": [
  {
    "id": "test1",
    "group": 1,
    "size": 10
  },
  {
    "id": "test2",
    "group": 1,
    "size": 10
  } 
  ],
  "links": [
  {
    "source": "test1",
    "target": "test2",
    "value": 1,
    "distance": 5
  },
  {
    "source": "test2",
    "target": "test1",
    "value": 1,
    "distance": 5
  } 
  ]
}

Answer 1

我相信你几乎就在那里。使用像function(d) {return d.distance}这样的自定义函数是正确的方法。但是，您不需要在links数组中输入额外信息，因为链接已包含JSON文件的属性。

正如您所提到的，可以声明模拟使用distance属性，如下所示：

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().distance(function(d) {return d.distance;}).strength(0.1))

并且没有必要将额外信息推送到链接数组，因此您可以删除此行：

links.push({source: s, target: i, linkDist:linkDist}, {source: i, target: t, linkDist:linkDist });

我创建了一个带有一些修改过的JSON的JSFiddle来显示结果here。我添加了一个额外的链接到另一个节点，距离较短，以显示效果。

Answer 2

您当然可以根据链接改变链接距离。它只需要设置在稍微不同的位置。在您的情况下，您将链接距离设置为500.相反，您可能希望执行以下操作：

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().distance(linkDistance).strength(0.1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

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

https://github.com/d3/d3-force/blob/master/README.md#link_distance

d3.forcesimulation（）链接距离

2 个答案: