Javascript d3.js每个边的自定义链接距离_Javascript_Html_D3.js_Graph_Edges

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

javascript html d3.js graph

Javascript d3.js每个边的自定义链接距离,javascript,html,d3.js,graph,edges,Javascript,Html,D3.js,Graph,Edges,我一直在尝试使用d3从数据集创建一个带有权重的交互式图形。边长度不必完全等于权重我在这里一直在研究这个例子：在图边定义中，我为每个条目添加了属性强度。我的想法是把这种力量投入到。这是行不通的，我也不知道是否有一种简单的方法可以对脚本进行一些小的修改，从而获得想要的效果。我所做的唯一更改是向每个数据条目添加强度属性，并将链接距离修改为：.linkDistance（links.strength）我遗漏了什么吗下面的代码 <div id="bobby">

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

我在这里一直在研究这个例子：

在图边定义中，我为每个条目添加了属性强度。我的想法是把这种力量投入到。这是行不通的，我也不知道是否有一种简单的方法可以对脚本进行一些小的修改，从而获得想要的效果。我所做的唯一更改是向每个数据条目添加强度属性，并将链接距离修改为：.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>


.链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
.节点圆{
填充：#ccc；
冲程：#fff；
笔划宽度：1.5px；
}
正文{
字体：10px无衬线；
指针事件：无；
}
变量链接=[
{来源：“微软”，目标：“亚马逊”，价值：60}。。。
];
var节点={}；
//从链接计算不同的节点。
links.forEach（函数（link）{
link.source=节点[link.source]| |（节点[link.source]={name:link.source}）；
link.target=节点[link.target]| |（节点[link.target]={name:link.target}）；
});
可变宽度=960，
高度=500；
var-force=d3.layout.force（）
.节点（d3.值（节点））
.链接（links）
.尺寸（[宽度、高度]）
.link距离（links.strength）
。收费（-300）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（#bobby”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var link=svg.selectAll（“.link”）
.data（force.links（））
.enter（）.append（“行”）
.attr（“类”、“链接”）；
var node=svg.selectAll（“.node”）
.data（force.nodes（））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）
.呼叫（强制拖动）；
node.append（“圆”）
.attr（“r”，8）；
node.append（“文本”）
.attr（“x”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name；}）；
函数tick（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
}
函数mouseover（）{
d3.选择（这个）。选择（“圆”）。过渡（）
.持续时间（750）
.attr（“r”，16）；
}
函数mouseout（）{
d3.选择（这个）。选择（“圆”）。过渡（）
.持续时间（750）
.attr（“r”，8）；
}

链接不是唯一起作用的力量，因此最终结果是竞争力量之间的妥协。此外，如果链接长度在几何上是不可能的（例如：三角形的两条边累积起来比第三条边短），那么也无法按预期设置链接。这个问题关注d3v4+中的固定链接距离，但我已经很久没有关注d3v3了。最后，我也看不出本例中设置了

链接的位置。strength

，这可能也会给您带来一些悲伤。