javascript - d3.forcesimulation() 链接距离

coder 2025-03-31 原文

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

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/

forcesimulation javascript 34 function link d3.js svg

有关javascript - d3.forcesimulation() 链接距离的更多相关文章

ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - Prawn - 表格单元格内的链接 - 2
我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 使用 Watir 检查错误链接 - 2
我有一个未排序的链接列表，我将其保存在旁边，我想单击每个链接并确保它转到真实页面而不是404、500等。问题是我不知道该怎么做。是否有一些我可以检查的对象会给我http状态代码或任何东西？mylinks=Browser.ul(:id,'my_ul_id').linksmylinks.eachdo|link|link.click#needtocheckfora200statusorsomethinghere!how?Browser.backend 最佳答案我的回答与铁皮人的想法类似。require'net/http'require'
ruby - 如何为 pbcopy 生成富文本链接 - 2
我一直在玩一个脚本，它在Chrome中获取选定的文本并在Google中查找它，提供四个最佳选择，然后粘贴相关链接。它以不同的格式粘贴，具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式，普通网站的HTML，我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子，但它仍然输出纯文本。在文本编辑中保存文件并进行试验后，我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te
ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2
基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby - 使用指向 ruby 可执行文件的符号链接(symbolic link)时查找相关库 - 2
假设您有一个可执行文件foo.rb，其库bar.rb的布局如下:/bin/foo.rb/lib/bar.rb在foo.rb的header中放置以下要求以在bar.rb中引入功能:requireFile.dirname(__FILE__)+"../lib/bar.rb"只要对foo.rb的所有调用都是直接的，这就可以正常工作。如果你把$HOME/project和符号链接(symboliclink)foo.rb放入$HOME/usr/bin,然后__FILE__解析为$HOME/usr/bin/foo.rb,因此无法找到bar.rb关于foo.rb的目录名.我意识到像rubygems这
ruby-on-rails -/usr/local/lib/libz.1.dylib，文件是为 i386 构建的，它不是被链接的体系结构 (x86_64) - 2
在我的mac上安装几个东西时遇到这个问题，我认为这个问题来自将我的豹子升级到雪豹。我认为这个问题也与macports有关。/usr/local/lib/libz.1.dylib,filewasbuiltfori386whichisnotthearchitecturebeinglinked(x86_64)有什么想法吗？更新更具体地说，这发生在安装nokogirigem时日志看起来像:xslt_stylesheet.c:127:warning:passingargument1of‘Nokogiri_wrap_xml_document’withdifferentwidthduetoproto
ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本？ - 2
我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t

javascript - d3.forcesimulation() 链接距离

有关javascript - d3.forcesimulation() 链接距离的更多相关文章

随机推荐