Accepted answer
<script>$(function(){var svg ="#chart").append("svg:svg");});</script>
<div id="chart"></div>

In other words, it's not happening because you can't query against something that doesn't exist yet-- so just do it after the page loads (here via jquery).

Btw, its recommended that you place your JS files before the close of your body tag.


Please try this approach. It worked for me.

<script  type="text/javascript" src='./d3.v4.min.js'></script>

    <div id="jschart41448" style="color:red">
        Hi red

    <div id="jschart41449" style="color:blueviolet">
        Hi blueviolet

 <script type="text/javascript"   >
  "#jschart41448").style('color', 'green' , null);
  "#jschart41449").style('color', 'yellow', null);


just add your <script src="./custom.js"></script> before </bod> tag. that is supply time to detect your #chart element in html body


I just found out that if your element id is just a number, then"1234"), will not work.

The unique id needs to be an alpha-numeric character."1234")"container1234")


Use jQuery $(document) function...


var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()

var yAxis = d3.svg.axis()

//'#chart svg')

    //var svg ="#chart").append("svg:svg");

    var svg ="#BarChart").append("svg:svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + + margin.bottom)
    .attr("transform", "translate(" + margin.left + "," + + ")");

    var updateData = function(getData){

    d3.selectAll('svg > g > *').remove();

    d3.csv(getData, function(error, data) {
      if (error) throw error;

      var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

      data.forEach(function(d) {
        d.ages = { return {name: name, value: +d[name]}; });

      x0.domain( { return d.State; }));
      x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
      y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")

          .attr("class", "y axis")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")

      var state = svg.selectAll(".state")
          .attr("class", "state")
          .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

          .data(function(d) { return d.ages; })
          .attr("width", x1.rangeBand())
          .attr("x", function(d) { return x1(; })
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); })
          .style("fill", function(d) { return color(; });

      var legend = svg.selectAll(".legend")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

          .attr("x", width - 18)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

          .attr("x", width - 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .style("text-anchor", "end")
          .text(function(d) { return d; });






Not enough reputation to comment yet so I'll just put this here:

To expand on Micah's answer - the browser runs your code top to bottom, so if you write:

<div id="chart"></div>
<script>var svg ="#chart").append("svg:svg");</script>

The browser will create a div with id "chart", and then run your script, which will try to find that div, and, hurray, success.

Otherwise if you write:

<script>var svg ="#chart").append("svg:svg");</script>
<div id="chart"></div>

The browser runs your script, and tries to find a div with id chart, but it hasn't been created yet so it fails.

THEN the browser creates a div with id "chart".

Related Query

More Query from same tag