Java 直接部队布局定制-d3.js

关于堆栈溢出的第一个问题，请容忍我！我是d3.js新手，但我一直对其他人能用它完成的事情感到惊讶。。。几乎同样惊讶于我自己在这方面所取得的进展是如此之小！很明显，我不是在摸索什么，所以我希望这里善良的灵魂能给我光明

我的目的是基于CSV数据制作一个连通图。我的CSV数据具有不同的信息，其中有些需要表示为节点，有些需要用作ltool tip的信息。我可以使用以下代码片段从CSV读取数据：

d3.csv("data/project.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.Project);
    link.target = nodeByName(link.Problem);
  });

将节点P1连接到三个节点（URL）。 问题是，我看不到所选节点上的标签，如何使用CSV文件中的提取信息，如“日期、摘要、URL”。是否有任何方法可以使用鼠标单击，当我单击节点时，我需要它的信息显示在SVG板上以用于进一步分析，例如显示URL、摘要的简短文本，当用户单击板时，它应该显示完整的信息

这是我从中使用的代码

我期望的最终结果如下图所示：

---

单击“问题”节点时，SVG上应显示黄色框

您需要解决的第一个问题是在何处正确添加节点文本。现在，您正在将文本嵌套在圆内，但是文本标签需要是圆的兄弟（它们甚至不需要位于每个圆的旁边）。您可以将其替换为：

var circletext = node.append("svg:text")
.text(function(d) {return d.name;})
.attr("class","labelText");

与：

（参考资料：）

接下来，如果您想显示分数/数据/摘要，请注意，它们是附加到链接的，而不是节点（只有三个，不是四个）。但是，在创建节点时，可以将此信息从链接传递到节点。修改nodeByName函数以添加节点的新属性：

function nodeByName(name,score,data,summary) {
    return nodesByName[name] || (nodesByName[name] = {name: name, score: score, data: data, summary: summary});
}

然后在创建链接时修改对此函数的调用：

links.forEach(function(link) {
    link.source = nodeByName(link.Project);
    link.target = nodeByName(link.Problem,link.Score,link.Data,link.Summary);
});

---

要使labeltooltip显示在固定位置，而不是节点旁边，您需要删除移动div的节点mouseover和mouseout事件上的位，可能只需将div添加到html中，而不是动态添加它。

任何帮助，如何获取节点值，很抱歉这么久才回来-我病了。您希望labeltooltip保持静止吗？由于代码当前已设置，当鼠标悬停时，它会浮动在节点旁边-尽管您必须将“位置样式”设置为“绝对”才能看到这一点。将看到我可以做些什么来获得要在labeltooltip中显示的实际数据。很抱歉听到这个消息，我需要在鼠标移到节点上时看到csv的内容，正如我在上图中所述。上面的解决方案，但请注意，由于您的数据是链接而不是节点，p1节点将没有任何数据。您可以手动更改此设置。

var circletext = container.selectAll("g")
.data(nodes)
.enter()
.append("text").text(function(d) {return d.name})
.attr("class", "labelText");

function nodeByName(name,score,data,summary) {
    return nodesByName[name] || (nodesByName[name] = {name: name, score: score, data: data, summary: summary});
}

links.forEach(function(link) {
    link.source = nodeByName(link.Project);
    link.target = nodeByName(link.Problem,link.Score,link.Data,link.Summary);
});