0

私のコードは次のようになります。私はd3の使い方を学んでいるので、d3js Webサイトの助けを借りてこれを書きました。これは私の最初の JS ライブラリなので、最初は構文と慣習が少し混乱しましたが、理解できたと思います。

このコードは棒グラフを作成します。CSS で text 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>

私が最も興味を持っているのは、次の 2 行です。

        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 に答える