search

CSNW / d3.compose

Compose complex, data-driven visualizations from reusable charts and components with d3
http://CSNW.github.io/d3.compose/
MIT License
697 stars 24 forks source link

Example causes typeError #42

Closed toddbruner closed 8 years ago

toddbruner commented 8 years ago

Probably missing something simple but.

test.html 

    <html>
      <head>
        <script type="text/javascript"
                src="/vast/libs/d3.js"></script>
        <script type="text/javascript"
                src="/vast/libs/d3.chart.js"></script>
        <script type="text/javascript"
                src="/vast/libs/d3.compose-all.js"></script>
        <link   type="text/css"
               href="/vast/css/d3.compose.css"
                rel="stylesheet"
               >
       <script>
        var data = [
            {x: 1, y: 100,},
            {x: 2, y: 200,},
            {x: 3, y: 150,}
        ];

        var chart = d3.select('#chart').chart('Compose', function(data){
            var charts = [
                d3c.lines('results', {data: data})
            ];
            return [
                d3c.layered(charts)
            ];
        });
        chart.draw(data);
    </script>
  </head>
  <body>
    <h1>Competed Count</h1>
    <div id="chart"></div>
  </body>
</html>

Generates the following Error: Uncaught TypeError: Cannot read property 'tagName' of nullBase.extend.initialize @ d3.compose-all.js:2106Base @ d3.compose-all.js:1151Child @ d3.compose-all.js:1303d3.selection.chart @ d3.chart.js:721(anonymous function) @ vizstats.html:20

d3.js 3.5.5 d3.chart 0.2.1 everything else pulled from links on your website.

Thanks.

john-clarke commented 8 years ago

I think this might be due to your script executing before the body is rendered. Also, you'll need to set the charset to utf-8 for d3.js. The following works for me (paths modified slightly):

<html>
  <head>
    <meta charset="utf-8">
    <link type="text/css" href="dist/d3.compose.css"rel="stylesheet" >
    <script type="text/javascript" src="dist/d3.js"></script>
    <script type="text/javascript" src="dist/d3.chart.js"></script>
    <script type="text/javascript" src="dist/d3.compose-all.js"></script>
    <script>
    function main() {
      var data = [
          {x: 1, y: 100,},
          {x: 2, y: 200,},
          {x: 3, y: 150,}
      ];

      var chart = d3.select('#chart').chart('Compose', function(data){
          var charts = [
              d3c.lines('results', {data: data})
          ];
          return [
              d3c.layered(charts)
          ];
      });
      chart.draw(data);
    }
    </script>
  </head>
  <body onload="main()">
    <h1>Competed Count</h1>
    <div id="chart"></div>
  </body>
</html>

Renders: image

toddbruner commented 8 years ago

that indeed was the case, thank you for your help!