Question

我正在尝试进行d3强制模拟，我正在解析来自csv文件的数据，我正在尝试使用悬停并在节点上显示文本但我无法显示它虽然我能够解析csv文件。
这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
stroke: #000;
}

.node {
stroke: #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var width = 960,
height = 500;

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

var force = d3.layout.force()
.size([width, height]);

d3.csv("data.csv", function(error, links) {
if (error) throw error;

var nodesByName = {};

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

// Extract the array of nodes from the map by name.
var nodes = d3.values(nodesByName);

// Create the link lines.
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
  .attr("class", "link");
// Create the node circles.
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 4.5)
.call(force.drag);        
// Start the force layout.
force
.nodes(nodes)
  .links(links)
  .on("tick", tick)
  .start();

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("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
}

function nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = {name: name});
}
});

</script>

Here, Is my output
实际上，我是d3力模拟的新手，任何建议都非常感谢。
谢谢

Answer 1

也许这会奏效，

var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 4.5)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
.call(force.drag);

然后按照http://bl.ocks.org/WilliamQLiu/76ae20060e19bf42d774

中的示例调用函数

如何在d3强制模拟中使用悬停并在节点上添加文本

1 个答案: