module test by shimizu

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title></title>
    <style>
      html, body {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin:  0px;
      }
      #chart {
        width: 100%;
        height: 100%;    
        max-width: 1200px;
        max-height: 676px;    
        min-width: 600px;
        min-height: 338px;
      }
      .bg {
        fill:white;
      }
      .bar {
        fill:skyblue;
      }
      .axisLayer .axis .domain {
        stroke: #333333;
      }
      .axisLayer .tick line {
        stroke: #333333;
        stroke-width: 1px;
      }
      .axisLayer .tick text {
        fill: #333333;
        /*font-family: Oswald, sans-serif;*/
        font-size: 14px;
        letter-spacing: .05em;
      }
      .axisLayer .label {
        font-size: 12px;
        font-weight: normal;
        letter-spacing: .05em;
      }

      .backgroundLayer .grid line {
        stroke: #cccccc;
        stroke-dasharray: 3,3;
      }
      .backgroundLayer .grid .domain {
        stroke: none;
      }


    </style>
  </head>

  <body>
    <button id="update">updarte</button>  
    <div id="chart"></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>     
    <script src="nChart.js"></script>
    <script>
      !(function(){
        "use strict"

        var data = generateData()

        var BarChart = nChart.createVGroupBarChart()
          .baseMargin({top:100, left:0, bottom:100, right:0})
          .plotMargin({top:20, left:100, bottom:20, right:100})
          .x(function(d){ return d["年"] })
          .xIn(function(d){ return d["国名"] })
          .y(function(d){ return d["値"] })


        var Axis = nChart.createAxis()
          .yAxisGridVisible(true)    


        var selector = d3.selectAll("#chart")
          .datum(data)
          .call(BarChart)
          .call(Axis)

        d3.select("#update").on("click", function(){
          selector.update(generateData())
        })          

      }()) 

      function generateData(){
        return Array.prototype.concat.apply([], ["日本", "アメリカ", "フランス"].map(function(country){
          var array  = [2001,2002,2003,2004].map(function(year){
            var value = ~~(Math.random() * 100)
            return {"国名":country, "年":year, "値":value}                
          })
          return array
        }))   
      }    

    </script>    
  </body>
</html>