个人中心
gpt4 book ai didi

javascript - d3.forcesimulation() 链接距离

转载 作者：数据小太阳 更新时间：2023-10-29 06:14:59 27 4
gpt4 key购买 nike

我在堆栈中查看了不同的链接距离，似乎为了改变链接距离，您需要实现一个函数，然后传递该函数以动态分配链接距离:

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

然后我认为我可以传递给 svg，但返回函数错误而不是现有的 linkdistance 或 distance

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理想情况下，我想使用数据修改链接距离、电荷、力和链接颜色等参数，就像我对点的颜色所做的那样，但是，我相信我缺乏关于如何正确执行此操作的知识。例如在最后一行代码中，如果我要更改 from:to

.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));

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

代码

<!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文档示例

{
  "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
  } 
  ]
}

最佳答案

我相信你快到了。使用像 function(d) {return d.distance} 这样的自定义函数是正确的方法。但是，您不需要在链接数组中推送额外信息，因为链接已经包含 JSON 文件的属性。

正如您所提到的，模拟可以声明为使用距离属性，如下所示:

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 .我添加了一个额外的链接到另一个距离较短的节点以显示效果。

关于javascript - d3.forcesimulation() 链接距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40872317/

27 4 0
文章推荐： javascript - JS 在第一次加载时不工作 - 刷新后工作
文章推荐： php - Redis 时间序列数据和时区
文章推荐： ruby - Sidekiq 使作业入队，而不是使它们出队
文章推荐： javascript - Sequelize js 'include' 和 'raw'
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com