javascript - 强制定向布局，在鼠标悬停时列出源和目标值

Question

以 Mike Bostock 的 Mobile Patent Suit 示例为例，我想在鼠标悬停在圆圈上时列出 DIV 类文本中的类型值。我试着让它工作。我不知道为什么所有的值都列在 DIV 类文本中。我的工作代码可以在这里看到。

http://codepen.io/anon/pen/zqthF

Answer 1

你应该删除这部分:

var div = d3.select("body").selectAll(".usertext")
    .data(links)
.enter().append("div")
.attr("class", "usertext")
.text(function(d) { return d.type;});

并改用这段代码:

var ul = document.getElementById("source");
var li = ul.firstChild;
li.innerText = links[a.index].type;
ul.appendChild(li)

您示例中的 HTML 应该是这样的:

<script src="http://d3js.org/d3.v3.min.js"></script>

<div class="usertext">
<ul id="source">
<li>Source</li>
</ul>
</div>

这里是完整代码: http://codepen.io/anon/pen/zkAtD