当前位置: 首页 > 面试题库 >

D3强制布局-通过名称而不是索引链接节点

曹华荣
2023-03-14
问题内容

我试图通过ID而不是索引链接d3节点(节点ID由我的应用程序生成)。

这是我的节点:

"Nodes": [
    {
      "Id": "338",
      "Name": "TEST NODE ONE",
      "Url": "http://www.google.com"
    },
    {
      "Id": "340",
      "Name": "TEST NODE TWO",
      "Url": "http://www.yahoo.com"
    },
    {
      "Id": "341",
      "Name": "TEST NODE THREE",
      "Url": "http://www.stackoverflow.com"
    },
    {
      "Id": "342",
      "Name": "TEST NODE FOUR",
      "Url": "http://www.reddit.com"
    }
  ]

它们当前通过索引链接:

  "links": [
    {
      "source": 0,
      "target": 0,
      "value": "0"
    },
    {
      "source": 0,
      "target": 1,
      "value": "0"
    },
    {
      "source": 1,
      "target": 2,
      "value": "0"
    },
    {
      "source": 3,
      "target": 2,
      "value": "0"
    }
  ]

但是,我想通过“ Id”链接它们:

  "Links": [
    {
      "Source": "338",
      "Target": "338",
      "Value": "0"
    },
    {
      "Source": "338",
      "Target": "340",
      "Value": "0"
    },
    {
      "Source": "340",
      "Target": "341",
      "Value": "0"
    },
    {
      "Source": "342",
      "Target": "341",
      "Value": "0"
    }
  ]

我已经尝试过此处提出的解决方案:https
:
//groups.google.com/forum/#!msg/d3-js/LWuhBeEipz4/0kZIojCYvhIJ

通过在调用force.nodes之前添加以下行:

  // make links reference nodes directly for this particular data format:
  var hash_lookup = [];
  // make it so we can lookup nodes in O(1):
  json.Nodes.forEach(function(d, i) {
    hash_lookup[d.Id] = d;
  });
  json.Links.forEach(function(d, i) {
    d.source = hash_lookup[d.Source];
    d.target = hash_lookup[d.Target];
  });

我已经尝试调试上述内容,但无法设法解决。我收到以下错误消息(通常意味着我没有正确设置链接):

Uncaught TypeError: Cannot read property 'weight' of undefined

链接到我的完整JS:http :
//jsfiddle.net/9sMrw/


问题答案:

这是一种简单的方法

var edges = [];
json.Links.forEach(function(e) {
    var sourceNode = json.Nodes.filter(function(n) {
        return n.Id === e.Source;
    })[0],
        targetNode = json.Nodes.filter(function(n) {
            return n.Id === e.Target;
        })[0];

    edges.push({
        source: sourceNode,
        target: targetNode,
        value: e.Value
    });
});

force
    .nodes(json.Nodes)
    .links(edges)
    .start();

var link = svg.selectAll(".link")
    .data(edges)
    ...

这是工作中的PLUNK。(为了安全起见,您应该分叉它,以防万一我无意中删除了它。)



 类似资料:
  • 问题内容: 我希望力导向布局中的某些节点忽略所有力,并基于该节点的属性停留在固定位置,同时仍能够拖动其他节点并对其施加排斥力并保持其链接线。 我以为就这么简单: 我也尝试过手动设置每个刻度的节点的x和y属性,但是如果该节点受力影响,链接将继续浮动到该节点所在的位置。 显然,我对这应该如何工作有基本的误解。如何在固定链接的同时仍允许它们可拖动的同时将节点固定在一个位置? 问题答案: 在所需的节点上将

  • 问题内容: 目标:按编号从PHP对象中检索数据元素。 这是对象的print_r($ data): 我不知道如何从中获取价值。这只是多记录对象的一条记录,应该使用id而不是名称。 这些是尝试失败的尝试,以说明目标是什么: 问题答案: 通常,PHP变量名称不能以数字开头。您也不能像未实现那样将其作为数组访问-这只是一个普通的基类。 但是,在这种情况下,您可以尝试按其数字名称访问对象属性,如下所示: 我

  • 我使用的是spring-boot:1.3.3、spring-hateoas:0.19.0和spring-data-rest-core:2.4.4。 这是Spring-Hateoas提供的内容的例子。过了一段时间,我将我的应用程序切换到SSL。

  • 问题内容: 有时,当我尝试启动Firefox时,它会显示“ Firefox进程已在运行”。所以我必须这样做: 我想要的是一个可以为我完成所有任务的命令。它会在进程列表中使用一个输入字符串并将其(或其他内容)放入其中,并杀死输出中的所有进程: 我尝试在PHP中执行此操作,但似乎只显示已在PHP脚本本身中执行过的进程(因此,它显示的唯一进程是其自身。) 问题答案: 详细信息:http : //linu

  • 我已经使用Android ADT几个星期了,我曾经通过转到:文件来创建新活动 当我选择“新建空白活动”并单击“下一步”时,会显示一个我必须填写的新表格,标题为“片段布局名称”。为什么这突然出现,有谁知道为什么我被迫创建一个片段布局,因为我甚至不想使用它。我还记得我的一个朋友说他大约一周前更新了他的SDK,他说他有同样的问题。我是否应该在XML文档加载后删除其中的片段,或者有没有一种方法可以禁用它,

  • 问题内容: 在SQL中,当我创建数据库索引时,需要给索引起一个名字,例如 似乎唯一需要此名称的时间是我要删除带有 索引名称还有其他用途吗? 问题答案: T-SQL链接