我的代码看起来像这样。我在 d3js 网站的帮助下写了这篇文章，因为我正在学习如何使用 d3。这是我的第一个 JS 库，所以语法和习惯一开始有点混乱，但我想我明白了。
此代码创建一个条形图。您会注意到，在 CSS 中，我将文本设置为 display = none，并且我只希望它在有人将鼠标移到条形图上时显示。我的计划是通过 getElementsByClassName 获取所有文本元素，我还尝试了 GetElementsByTagName 并将其传递给“文本”，但这也不起作用。一旦我掌握了这些元素的句柄，我就可以创建一个事件侦听器来与它们对话。但我不知道如何创建所述句柄。
<script src="http://d3js.org/d3.v3.min.js" charset="UTF-8"></script>
<style type="text/css">
.chart rect {
fill: steelblue;
stroke: white;
}
.chart text {
font-family:"Courier New", Courier, monospace;
fill:white;
display:none;
}
.chart rect:hover {
fill:red;
stroke:white;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [43, 12, 49, 32, 33, 41, 56, 67, 75, 89, 91, 100];
var chart = d3.select("body").append("svg")
.attr("class", "chart")
.attr("width", 420)
.attr("height", 20 * data.length);
var x = d3.scale.linear()
.domain([0,d3.max(data)])
.range([0,420]);
var y = d3.scale.ordinal()
.domain(data)
.rangeBands([0, 20*data.length]);
chart.selectAll("rect").data(data)
.enter().append("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());
chart.selectAll("text").data(data)
.enter().append("text")
.attr("class", "textClass")
.attr("x", x)
.attr("y", function(d){return y(d) +y.rangeBand()/2;})
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(String);
textElements = document.getElementsByClassName("textClass");
console.log(textElements);
</script>
</body>
我对这两行最感兴趣：
textElements = document.getElementsByClassName("textClass");
console.log(textElements);
为什么我没有在 firebug 中收到 console.log 消息给我数组？它以未定义的形式返回。