Javascript 定义要在工具提示中使用的JSON数据属性（工具提示显示“未定义”）

我已经研究了与此问题相关的其他SO问题，实施了解决方案，但尚未取得成功

我有一个由外部JSON文件驱动的d3 force directed图，该文件有五个属性：source、target、source\u title、target\u title和value

JSON示例：

[{"source":"Michael Scott", "source_title":"boss", "target":"Jim Halpert", "target_title":"salesman", "value":"1"},
{"source":"Pam Beasley", "source_title":"receptionist", "target":"Jim Halpert", "target_title":"salesman", "value":"1"},
{"source":"Pam Beasley", "source_title":"receptionist", "target":"Angela", "target_title":"accountant", "value":"1"}]

当前脚本：

<script>

d3.json("IA_Data.json", function(error, data){

data.forEach(function(d) {
        d.source_title = d.source_title;
    });

var links = data;

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 = 2000,
    height = 1000;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(5)
    .charge(-400)
    .gravity(.2)
    .on("tick", tick)
    .start();

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

var path = svg.append("g").selectAll("path")
    .data(force.links())
  .enter().append("path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {return d.source_title;});
svg.call(tip);

var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
    .enter().append("circle")
    .attr("r", 6)
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
  path.attr("d", linkArc);
  circle.attr("transform", transform);
}

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

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

});

</script>

由此产生的工具提示显示“未定义”，这意味着

source\u标题

未正确定义。如果我在d3.tip中将

source\u title

替换为

name

，工具提示中将显示

source

/

target

文本。如何正确定义“source\u title”属性

---

如果您有任何见解，我们将不胜感激-谢谢

节点数组中没有

源标题

解决方案很简单：在填充节点数组时创建键/值对：

links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source,
        source_title: link.source_title//creating 'source_title' here
    });
});

下面是您的代码演示（注意：这里只有两个圆圈有标题）：

var数据=[{
“来源”：“迈克尔·斯科特”，
“来源名称”：“老板”，
“目标”：“Jim Halpert”，
“目标职位”：“推销员”，
“值”：“1”
}, {
“来源”：“Pam Beasley”，
“来源名称”：“接待员”，
“目标”：“Jim Halpert”，
“目标职位”：“推销员”，
“值”：“1”
}, {
“来源”：“Pam Beasley”，
“来源名称”：“接待员”，
“目标”：“安吉拉”，
“目标职位”：“会计师”，
“值”：“1”
}];
data.forEach（函数（d）{
d、 source_title=d.source_title；
});
var链接=数据；
var节点={}；
//从链接计算不同的节点。
links.forEach（函数（link）{
link.source=节点[link.source]| |（节点[link.source]={
名称：link.source，
source\u title:link.source\u title
});
link.target=节点[link.target]| |（节点[link.target]={
名称：link.target，
target\u title:link.target\u title
});
});
可变宽度=300，
高度=150；
var-force=d3.layout.force（）
.节点（d3.值（节点））
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（5）
。收费（-400）
重力（.2）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var path=svg.append（“g”）.selectAll（“ceciliaPayne”）
.data（force.links（））
.enter（）.append（“路径”）
.attr（“类”，函数（d）{
返回“链接”+d.type；
})
.attr（“标记结束”，功能（d）{
返回“url（#“+d.type+”）；
});
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回d.source\u标题；
});
svg.call（tip）；
var circle=svg.append（“g”）.selectAll（“circle”）
.data（force.nodes（））
.enter（）.append（“圆”）
.attr（“r”，6）
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）；
//使用椭圆弧路径段对方向性进行双重编码。
函数tick（）{
路径属性（“d”，链接弧）；
circle.attr（“transform”，transform）；
}
功能链接弧（d）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+d.source.x+”、“+d.source.y+”A“+dr+”、“+dr+”0,1“+d.target.x+”、“+d.target.y”；
}
函数变换（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
}

路径{
填充：无；
笔画：黑色；
}

Hi你能分享你的json文件的一部分吗？为什么你只有一个结尾？我更新了帖子，加入了我的json文件的扩展示例。此外，我将

value

更改为

source\u title

（对于两个节点来说，实现值并没有真正意义），问题仍然存在。span标记来自工具提示的示例…它实际上没有做任何事情，现在它比我最初添加的所有字段的解决方案都有效。我又加了一个，但没用。你有没有想过为什么会这样？代码没有使用传统的链接和节点数组。它使用链接填充节点数组，这样做，它会更改链接数组。这是有意义的-但这会如何影响向节点添加新元素？链接已经包含了这些元素，所以它应该只是告诉节点这些元素属于它们。从本质上讲，难道不可能用无限数量的键值对填充节点吗？不，只有在单独创建节点和链接数组并进行精确匹配的情况下，才可能在这里使用此方法。但它适用于前8或9个属性，这让我感到困惑。谢谢你的帮助。

links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source,
        source_title: link.source_title//creating 'source_title' here
    });
});