Home/ Questions/Q 8694971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:55:01+00:00

The d3js doc says I can use the W3C selectors spec to select objects

  • 0

The d3js doc says I can use the W3C selectors spec to select objects in the DOM. How come the simple code below does not work? Actually nothing shows up. If I replace the selector with body for instance it works. But not if I target a specific div or whatsoever markup inside body.

            <html>
                <head>
                    <link rel="stylesheet" href="style.css">
                    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
                    <script type="text/javascript" src="d3.v2.min.js"></script>
                    <title>Bleech</title>
                </head>
            <body>
                <script type="text/javascript">
                    var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                            14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                            24, 18, 25, 9, 3 ];

                    d3.select("#chart").selectAll("p")
                                        .data(dataset)
                                        .enter()
                                        .append("div")
                                        .transition()
                                        .ease("linear")
                                        .attr("class", "bar")
                                        .duration(500)
                                        .style("height", function(d){
                                                return 10 * d;
                                            })
                                        .text(function(d){return d;});
                </script>

                <div id="chart"></div>

            </body>
            </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know d3, but why are you calling these methods on the div before it’s even rendered? You might want to put the call inside of window.onload event or jQuery document.ready (since I see you included the library), like so:

    $(document).ready(function () {
    var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ];
    d3.select("#chart").selectAll("p")
                       .data(dataset)
                       .enter()
                       .append("div")
                       .transition()
                       .ease("linear")
                       .attr("class", "bar")
                       .duration(500)
                       .style("height", function(d){
                               return 10 * d;
                           })
                       .text(function(d){return d;});
});
    • 0