在d3中获取DOM中的元素_Dom_Get_D3.js_Element

在d3中获取DOM中的元素

dom d3.js

在d3中获取DOM中的元素,dom,get,d3.js,element,Dom,Get,D3.js,Element,我的代码看起来像这样。我是在d3js网站的帮助下写这篇文章的，因为我正在学习如何使用d3。这是我的第一个JS库，所以语法和习惯一开始有点混乱，但我想我记下来了此代码创建条形图。您会注意到，在CSS中，我将文本display=none，并且我只希望在有人将鼠标移到条形图上时显示它。我的计划是通过getElementsByCassName获取所有文本元素，我还尝试了GetElementsByTagName并将其传递为“text”，但这也不起作用。一旦我有了这些元素的句柄，我就可以创建一个事件侦听器

我的代码看起来像这样。我是在d3js网站的帮助下写这篇文章的，因为我正在学习如何使用d3。这是我的第一个JS库，所以语法和习惯一开始有点混乱，但我想我记下来了

此代码创建条形图。您会注意到，在CSS中，我将文本display=none，并且我只希望在有人将鼠标移到条形图上时显示它。我的计划是通过getElementsByCassName获取所有文本元素，我还尝试了GetElementsByTagName并将其传递为“text”，但这也不起作用。一旦我有了这些元素的句柄，我就可以创建一个事件侦听器来与它们对话。但我不知道如何创建这个句柄

    <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>

为什么我在firebug中没有得到一条console.log消息来给我数组？当您将JavaScript放在

$（function（）{…}）中时，它将以未定义的形式返回。
使用JQuery块
查看此提琴：
您也可以使用d3选择元素：textcelements=chart.selectAll（'.textClass'）        textElements = document.getElementsByClassName("textClass");
            console.log(textElements);