wvengen/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! present from d3.chart 0.3.0 onwards.

git clone https://gist.github.com/5789e5b2a295156ea48e.git && cd 5789e5b2a295156ea48e.git
npm install
webpack index.js build.js
open index.html
see a basic circle graph

There used to be a problem here, thanks to JMStewart for finding the solution.
If you want to customize an existing chart, you can create a new chart based on that in exactly the same manner as shown here. Instead of var Chart = require('d3.chart'), you'd use var SomeChart = require('d3.chart.somechart') and define your own with var MySomeChart = SomeChart.extend('MySomeChart', { /* ... */ }). See d3.chart.sankey for a real-world example.

  
## circle.js
'use strict';

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

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

## index.html
<html>
  <head></head>
  <body>
    <div id="chart"></div>
    <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('#chart').append('svg');
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": "^0.3.0"
  }
}
	'use strict';

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

	module.exports = Chart("CircleChart", {
	initialize: function() {
	this.layer("circles", this.base.append("g"), {
	dataBind: function(data) {
	return this.selectAll("circle").data(data);
	},
	insert: function() {
	return this.append("circle");
	},
	events: {
	"enter": function() {
	this.attr("cx", (d) => d*10)
	.attr("cy", 10)
	.attr("r", 5)
	.style("fill", "red");
	}
	}
	});
	}
	});
	<html>
	<head></head>
	<body>
	<div id="chart"></div>
	<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('#chart').append('svg');
	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": "^0.3.0"
	}
	}