kristw · April 15, 2018 15:24
diff --git a/readme.md b/readme.md
diff --git a/bubbleChart.js b/bubbleChart.js
 // Define bubble chart
 var BubbleChart = d3Kit.factory.createChart(
  // First argument is the default options for this chart
  {
    margin: {top: 60, right: 60, bottom: 60, left: 60},
    initialWidth: 800,
    initialHeight: 460
  },
  // The second argument is an Array that contains
  // names of custom events from this chart.
  // In this example chart,
  // it will dispatch event "bubbleClick" when users click on a bubble.
  ['bubbleClick'],
  // The third argument is an internal constructor.
  // This is where you would implement a bubble chart
  // inside the passed skeleton.
  function(skeleton){
    var layers = skeleton.getLayerOrganizer();
    var dispatch = skeleton.getDispatcher();
    var color = d3.scale.category10();

    layers.create(['content', 'x-axis', 'y-axis']);

    var x = d3.scale.linear()
      .range([0, skeleton.getInnerWidth()]);

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

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient('bottom');

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient('left');

    var visualize = d3Kit.helper.debounce(function(){
      if(!skeleton.hasData()){
        d3Kit.helper.removeAllChildren(layers.get('content'));
        return;
      }
      var data = skeleton.data();

      x.domain(d3.extent(data, function(d){return d.x;}))
        .range([0, skeleton.getInnerWidth()]);
      y.domain(d3.extent(data, function(d){return d.y;}))
        .range([skeleton.getInnerHeight(), 0]);

      layers.get('x-axis')
        .attr('transform', 'translate(0,' + skeleton.getInnerHeight() + ')')
        .call(xAxis);

      layers.get('y-axis')
        .call(yAxis);

      var selection = layers.get('content').selectAll('circle')
        .data(data);

      selection.exit().remove();

      selection.enter().append('circle')
        .attr('cx', function(d){return x(d.x);})
        .attr('cy', function(d){return y(d.y);})
        .on('click', dispatch.bubbleClick);

      selection
        .attr('cx', function(d){return x(d.x);})
        .attr('cy', function(d){return y(d.y);})
        .attr('r', function(d){return d.r;})
        .style('fill', function(d, i){return color(i);});

    }, 10);

    skeleton
      .autoResize('width')
      .on('resize', visualize)
      .on('data', visualize);
  }
 );
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Angular + d3Kit Bubble Chart</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-app="app">
    <div ng-controller="mainCtrl">
      <button ng-click="generate()">generate data</button>
      <bubble-chart chart-data="bubbles" chart-on-bubble-click="handleClick"></bubble-chart>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <script src="https://rawgit.com/twitter/d3kit/master/dist/d3kit.min.js" type="text/javascript"></script>
    <script src="https://rawgit.com/kristw/angular-d3kit-adapter/master/dist/angular-d3kit-adapter.min.js"></script>
    <script src="bubbleChart.js"></script>
    <script src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 var app = angular.module('app', [])
  .controller('mainCtrl', function($scope){
    $scope.generate = function(){
      // Generate random data
      var bubbles = [];
      for(var i=0;i<100;i++){
        bubbles.push({
          x: Math.random()*100,
          y: Math.random()*100,
          r: Math.random()*5+3
        });
      }

      $scope.bubbles = bubbles;
    };

    $scope.generate();

    $scope.handleClick = function(d){
      alert(JSON.stringify(d));
    };
  });

 angular.d3KitAdapter.plug(app, 'bubbleChart', BubbleChart);
diff --git a/ss.png b/ss.png
diff --git a/style.css b/style.css
 body {
  font: 10px sans-serif;
 }

 .x-axis-layer line, .y-axis-layer line,
 .x-axis-layer path, .y-axis-layer path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }
diff --git a/thumbnail.png b/thumbnail.png
	// Define bubble chart
	var BubbleChart = d3Kit.factory.createChart(
	// First argument is the default options for this chart
	{
	margin: {top: 60, right: 60, bottom: 60, left: 60},
	initialWidth: 800,
	initialHeight: 460
	},
	// The second argument is an Array that contains
	// names of custom events from this chart.
	// In this example chart,
	// it will dispatch event "bubbleClick" when users click on a bubble.
	['bubbleClick'],
	// The third argument is an internal constructor.
	// This is where you would implement a bubble chart
	// inside the passed skeleton.
	function(skeleton){
	var layers = skeleton.getLayerOrganizer();
	var dispatch = skeleton.getDispatcher();
	var color = d3.scale.category10();

	layers.create(['content', 'x-axis', 'y-axis']);

	var x = d3.scale.linear()
	.range([0, skeleton.getInnerWidth()]);

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

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom');

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left');

	var visualize = d3Kit.helper.debounce(function(){
	if(!skeleton.hasData()){
	d3Kit.helper.removeAllChildren(layers.get('content'));
	return;
	}
	var data = skeleton.data();

	x.domain(d3.extent(data, function(d){return d.x;}))
	.range([0, skeleton.getInnerWidth()]);
	y.domain(d3.extent(data, function(d){return d.y;}))
	.range([skeleton.getInnerHeight(), 0]);

	layers.get('x-axis')
	.attr('transform', 'translate(0,' + skeleton.getInnerHeight() + ')')
	.call(xAxis);

	layers.get('y-axis')
	.call(yAxis);

	var selection = layers.get('content').selectAll('circle')
	.data(data);

	selection.exit().remove();

	selection.enter().append('circle')
	.attr('cx', function(d){return x(d.x);})
	.attr('cy', function(d){return y(d.y);})
	.on('click', dispatch.bubbleClick);

	selection
	.attr('cx', function(d){return x(d.x);})
	.attr('cy', function(d){return y(d.y);})
	.attr('r', function(d){return d.r;})
	.style('fill', function(d, i){return color(i);});

	}, 10);

	skeleton
	.autoResize('width')
	.on('resize', visualize)
	.on('data', visualize);
	}
	);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Angular + d3Kit Bubble Chart</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body ng-app="app">
	<div ng-controller="mainCtrl">
	<button ng-click="generate()">generate data</button>
	<bubble-chart chart-data="bubbles" chart-on-bubble-click="handleClick"></bubble-chart>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
	<script src="https://rawgit.com/twitter/d3kit/master/dist/d3kit.min.js" type="text/javascript"></script>
	<script src="https://rawgit.com/kristw/angular-d3kit-adapter/master/dist/angular-d3kit-adapter.min.js"></script>
	<script src="bubbleChart.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	var app = angular.module('app', [])
	.controller('mainCtrl', function($scope){
	$scope.generate = function(){
	// Generate random data
	var bubbles = [];
	for(var i=0;i<100;i++){
	bubbles.push({
	x: Math.random()*100,
	y: Math.random()*100,
	r: Math.random()*5+3
	});
	}

	$scope.bubbles = bubbles;
	};

	$scope.generate();

	$scope.handleClick = function(d){
	alert(JSON.stringify(d));
	};
	});

	angular.d3KitAdapter.plug(app, 'bubbleChart', BubbleChart);
	body {
	font: 10px sans-serif;
	}

	.x-axis-layer line, .y-axis-layer line,
	.x-axis-layer path, .y-axis-layer path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}