Stack Area-exit remove

by matox

HTML

<div id="graph"></div>

CSS

#graph {
    font-size: 13px;
}

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

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

// Chart dimensions
var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
    mini_margin = {top: 585, right: 80, bottom: 20, left: 40},
    main_width  = 1300 - main_margin.left - main_margin.right,
    main_height = 650 - main_margin.top - main_margin.bottom,
    mini_height = 650 - mini_margin.top - mini_margin.bottom;;

// Define some offsets
var axis_offset        = 275,
    legend_offset      = 195,
    legend_text_offset = {height: 518, width: 195},
    legend_rect_offset = {height: 525, width: 235},
    legend_interval    = 40;

// The label for the Y axis
var yLabel = "Duration";

// The date format
var dateFormat = d3.time.format("%b %d"); 

// Define main svg element in #graph
var svg = d3.select("#graph").append("svg")
    .attr("width", main_width + main_margin.left + main_margin.right)
    .attr("height", main_height + main_margin.top + main_margin.bottom);

// Add the clip path
svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", main_width - axis_offset)
    .attr("height", main_height);

var main = svg.append("g")
    .attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");

var mini = svg.append("g")
    .attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");

var categories = ["Success", "Failed", "Failed2"];
var stackColors = ["#98abc5","#ff8c00", "#ffcc00"];
var parseDate = d3.time.format("%Y-%m-%d");

// Setup X time scale
var main_x = d3.time.scale()
    .range([0, main_width - axis_offset]);

var mini_x = d3.time.scale()
    .range([0, main_width - axis_offset]);

var main_xAxis = d3.svg.axis()
    .scale(main_x)
    .ticks(10)
    .orient("bottom");

var mini_xAxis = d3.svg.axis()
      .scale(mini_x)
      .ticks(10)
      .orient("bottom");

var main_y = d3.scale.sqrt()
    .range([main_height, 10]);

var mini_y = d3.scale.sqrt()
            .range([mini_height, 10]);

var main_yAxis = d3.svg.axis()
    .scale(main_y)
   ...