每条边的 d3.js 自定义链接距离

编程问答 2022-05-15

问题描述

我一直在尝试使用 d3 从数据集中创建一个带有权重的交互式图表。边长不必与权重完全相等。

我一直在这里处理这个例子： http://bl.ocks.org/mbostock/2706022

在图边定义中，我为每个条目添加了一个属性强度。而我的想法是将这种力量放入 .linkdistance 中。这不起作用，我不知道是否有一种简单的方法对脚本进行细微修改并获得所需的效果。我所做的唯一更改是为每个数据条目添加了强度属性并将链接距离修改为：.linkdistance(links.strength)。

我错过了什么吗？

下面的代码...

    <div id="bobby">
</div>


<!DOCTYPE html>
<Meta charset="utf-8">
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=Cs6EpamAVdjuYNy8A8efDlmContay6Yn-kBas4iYw8HJm8lME6LL-Wy_PqociUeWwPXD4WI36TnCZQBq3doSK0aNfVl-I0vmj15XFejAbdp0_MTgDjF55kjbbm0sGEZJ7vlB8nE92HceHfpONOz4OA" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cDovL2JsLm9ja3Mub3JnL21ib3N0b2NrL3Jhdy8yNzA2MDIyL2RmYTIwZjc1MTg0NTY1YzFkZmY4YTM1ZDAyMWVhYmM0ODI5YTZjNjcv"/><style>

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

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

text {
  font: 10px sans-serif;
  pointer-events: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

    var links = [
  {source: "Microsoft",target: "Amazon",value: 60},...
    ];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var width = 960,height = 500;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width,height])
    .linkdistance(links.strength)
    .charge(-300)
    .on("tick",tick)
    .start();

var svg = d3.select("#bobby").append("svg")
    .attr("width",width)
    .attr("height",height);

var link = svg.selectAll(".link")
    .data(force.links())
  .enter().append("line")
    .attr("class","link");

var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class","node")
    .on("mouSEOver",mouSEOver)
    .on("mouSEOut",mouSEOut)
    .call(force.drag);

node.append("circle")
    .attr("r",8);

node.append("text")
    .attr("x",12)
    .attr("dy",".35em")
    .text(function(d) { return d.name; });

function tick() {
  link
      .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; });

  node
      .attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function mouSEOver() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r",16);
}

function mouSEOut() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r",8);
}

</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

edgesgraphgraphgraphhtmljavascript