JMStewart/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Basic example showing how to make a chart based on d3.chart
using the new and shiny UMD interface. This is currently being discussed
in #117, and not ready for use. It will be!
@wvengen created a gist showing a problem with this build, and this gist is my fix for those problems. The issue here was that rebuilding d3.chart in step 3 installed a local version of d3, which got included in the webpack bundle. This meant that the final webpack bundle had 2 copies of d3, and d3.chart was only attached to one of them. By removing the node_modules after building d3.chart we can avoid this problem.

Save the files somewhere
npm install
rebuild d3.chart: cd node_modules/d3.chart && npm install && grunt build && rm -rf node_modules && cd -
webpack index.js build.js
open index.html
no more errors!


## circle.js
'use strict';

var Chart = require('d3.chart');

module.exports = Chart("CircleChart", {
  initialize: function() {
    this.layer("circles", this.base.append("g"), {
      dataBind: (data) => this.selectAll("circle").data(data),
      insert: () => this.append("circle"),
      events: {
        "enter": function() {
          this.attr("cx", (d) => d*10)
              .attr("cy", 10)
              .attr("r", 5)
              .style("fill", "red");
        }
      }
    });
  }
});

## index.html
<html>
  <body>
    <script type="text/javascript" src="build.js" charset="utf-8"></script>
  </body>
</html>

## index.js
'use strict';

var d3 = require('d3');
var Circle = require('./circle');

var svg = d3.select('body')
  .append('svg')
  .attr('height', 30)
  .attr('width', 400);

new Circle(svg)
  .draw([1, 4, 6, 9, 12, 13, 30]);

## package.json
{
  "name": "d3.chart-webpack-test",
  "private": true,
  "version": "0.1.0",
  "devDependencies": {
    "webpack": "^1.12.0"
  },
  "dependencies": {
    "d3": "^3.5.12",
    "d3.chart": "jugglinmike/d3.chart#amd-3"
  }
}
	'use strict';

	var Chart = require('d3.chart');

	module.exports = Chart("CircleChart", {
	initialize: function() {
	this.layer("circles", this.base.append("g"), {
	dataBind: (data) => this.selectAll("circle").data(data),
	insert: () => this.append("circle"),
	events: {
	"enter": function() {
	this.attr("cx", (d) => d*10)
	.attr("cy", 10)
	.attr("r", 5)
	.style("fill", "red");
	}
	}
	});
	}
	});
	<html>
	<body>
	<script type="text/javascript" src="build.js" charset="utf-8"></script>
	</body>
	</html>
	'use strict';

	var d3 = require('d3');
	var Circle = require('./circle');

	var svg = d3.select('body')
	.append('svg')
	.attr('height', 30)
	.attr('width', 400);

	new Circle(svg)
	.draw([1, 4, 6, 9, 12, 13, 30]);
	{
	"name": "d3.chart-webpack-test",
	"private": true,
	"version": "0.1.0",
	"devDependencies": {
	"webpack": "^1.12.0"
	},
	"dependencies": {
	"d3": "^3.5.12",
	"d3.chart": "jugglinmike/d3.chart#amd-3"
	}
	}