Skip to content

Instantly share code, notes, and snippets.

@bhvaleri
Created March 25, 2015 06:42
Show Gist options
  • Save bhvaleri/a855ed146bb11f5332ac to your computer and use it in GitHub Desktop.
Save bhvaleri/a855ed146bb11f5332ac to your computer and use it in GitHub Desktop.
Dot Remove
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var data = [
{ x: 1, y: 4 },
{ x: 2, y: 5 },
{ x: 3, y: 6 },
{ x: 4, y: 7 },
{ x: 5, y: 8 },
{ x: 6, y: 9 },
{ x: 7, y: 20 },
{ x: 8, y: 10 },
{ x: 9, y: 11 },
{ x: 10, y: 110 }
]
var margin = {top: 20, right: 10, bottom: 20, left: 40 };
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var xScale = d3.scale.linear()
.range([0, width])
.domain([1,10]);
var yScale = d3.scale.linear()
.range([0, height]);
var xAxis = d3.svg.axis()
.orient('bottom')
.scale(xScale);
var yAxis = d3.svg.axis()
.orient('left')
.scale(yScale);
//layers
var xAxisLayer = svg.append('g')
.attr('class', 'x-axis-layer')
.attr('transform', 'translate(0,' + height + ')');
var yAxisLayer = svg.append('g')
.attr('class', 'y-axis-layer');
var dotLayer= svg.append('g')
.attr('class', 'dot-layer');
var draw = function () {
yScale.domain([d3.max(data, function(d) { return d.y; }), 0]);
yAxis.scale(yScale);
xAxis(xAxisLayer);
yAxisLayer.transition().call(yAxis);
var dots = dotLayer.selectAll('.dot').data(data);
dots.enter()
.append('circle')
.attr('class', 'dot')
.attr('r', 5)
.on('click', function(d) {
var index = data.indexOf(d);
data.splice(index, 1);
draw();
})
;
dots
.attr('cx', function(d) { return xScale(d.x); })
.attr('cy', function(d) { return yScale(d.y); });
dots.exit().remove();
};
draw();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment