0

我的代码看起来像这样。我在 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 消息给我数组？它以未定义的形式返回。

4

1 回答 1

2

$(function() { ... });当您将 JavaScript 放在一个块中时，它可以与 JQuery 一起使用。

看到这个小提琴：http: //jsfiddle.net/CELxx/3/

于 2013-05-16T20:47:35.453 回答