Home/ Questions/Q 8872607
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T18:15:34+00:00

Here is my d3.js code <html> <head> <title>D3 Test</title> </head> <body> <script type=text/javascript src=d3/d3.v2.js></script>

  • 0

Here is my d3.js code

<html>
<head>
    <title>D3 Test</title>

</head>
<body>
    <script type="text/javascript" src="d3/d3.v2.js"></script>
    <script type="text/javascript">
        var w = 400,
            h = 400,
            padding = 31,
            p = 10,
            barwidth = 10;
        var data = [{count:200,year:2008},
                    {count:240,year:2010},
                    {count:290,year:2009}];
        var bar_height = d3.scale.linear()
                        .domain([d3.max(data, function(d) { return d.count; }), 0] )  // min max of count
                        .range([p, h-p]);
        var bar_xpos = d3.scale.linear()
                        .domain([2005, d3.max(data, function(d) { return d.year; })] )  // min max of year
                        .range([p,w-p]);
        var xAxis = d3.svg.axis()
                    .scale(bar_xpos)
                    .orient("bottom")
                    .ticks(5);  //Set rough # of ticks

        var yAxis = d3.svg.axis()
                    .scale(bar_height)
                    .orient("left")
                    .ticks(5);

        var svg = d3.select("svg")
                    .attr("width", w)
                    .attr("height", h);

        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);

        svg.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("x", function(d) {
                return bar_xpos(d.year); })
            .attr("y", function(d) { 
                return bar_height(d.count); })
            .attr("width", barwidth)
            .attr("height", function(d) {return h - bar_height(d.count) - padding; })
            .attr("fill", "steelblue")  
    </script>
</body>

This code is working fine here http://enjalot.com/inlet/4132552/
but when i try this in an html file it doesn’t work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Append your svg to the body or a div. 

     var svg = d3.select("body").append("svg")
                .attr("width", w)
                .attr("height", h);

    It works fine

    • 0