fix track container

dist/circosJS.js

@@ -439,7 +439,7 @@ circosJS.Chord = function() {
   })(this);
   this.renderChords = function(parentElement, name, conf, data, layout, ratio, getSource, getTarget) {
     var link, track;
-    track = parentElement.append('g').attr('class', name + ' ' + conf.colorPalette);
+    track = parentElement.append('g').attr('class', conf.colorPalette);
     link = track.selectAll('.chord').data(data).enter().append('path').attr('class', 'chord').attr('d', d3.svg.chord().source(function(d) {
       return getSource(d, layout);
     }).target(function(d) {
@@ -459,7 +459,10 @@ circosJS.Chord = function() {
   };
   this.render = (function(_this) {
     return function(instance, parentElement, name) {
-      return _this.renderChords(parentElement, name, _this.conf, _this.data, instance._layout, _this.ratio, _this.getSource, _this.getTarget);
+      var track;
+      parentElement.select('.' + name).remove();
+      track = parentElement.append('g').attr('class', name);
+      return _this.renderChords(track, name, _this.conf, _this.data, instance._layout, _this.ratio, _this.getSource, _this.getTarget);
     };
   })(this);
   return this;
@@ -471,7 +474,7 @@ circosJS.Heatmap = function() {
   this.renderDatumContainer = (function(_this) {
     return function(instance, parentElement, name, data, conf) {
       var group, track;
-      track = parentElement.append('g').attr('class', name + ' ' + conf.colorPalette);
+      track = parentElement.append('g').attr('class', conf.colorPalette);
       return group = _this.renderBlock(track, data, instance._layout);
     };
   })(this);
@@ -495,7 +498,7 @@ circosJS.Histogram = function() {
   this.renderDatumContainer = (function(_this) {
     return function(instance, parentElement, name, data, conf) {
       var group, track;
-      track = parentElement.append('g').attr('class', name + ' ' + _this.conf.colorPalette);
+      track = parentElement.append('g').attr('class', _this.conf.colorPalette);
       return group = _this.renderBlock(track, data, instance._layout);
     };
   })(this);
@@ -733,7 +736,7 @@ circosJS.Stack = function() {
   this.renderDatumContainer = (function(_this) {
     return function(instance, parentElement, name, data, conf) {
       var group, track;
-      track = parentElement.append('g').attr('class', name + ' ' + conf.colorPalette);
+      track = parentElement.append('g').attr('class', conf.colorPalette);
       return group = _this.renderBlock(track, data, instance._layout);
     };
   })(this);
@@ -856,8 +859,10 @@ circosJS.Track = function() {
   };
   this.render = (function(_this) {
     return function(instance, parentElement, name) {
-      var datumContainer, _ref;
-      datumContainer = _this.renderDatumContainer(instance, parentElement, name, _this.data, _this.conf);
+      var datumContainer, track, _ref;
+      parentElement.select('.' + name).remove();
+      track = parentElement.append('g').attr('class', name);
+      datumContainer = _this.renderDatumContainer(instance, track, name, _this.data, _this.conf);
       if ((_ref = _this.conf.axes) != null ? _ref.display : void 0) {
         _this.renderAxes(datumContainer, _this.conf, instance._layout, _this.data);
       }
@@ -1048,15 +1053,18 @@ circosJS.renderLayoutTicks = function(conf, layout, d3, instance) {
 };
 
 circosJS.Core.prototype.render = function(ids, removeTracks) {
-  var name, renderAll, svg, track, trackStore, trackType, tracks, _ref;
+  var name, renderAll, svg, track, trackStore, trackType, tracks, _ref, _ref1;
   if (typeof ids === 'undefined') {
     renderAll = true;
   }
   svg = d3.select(this.conf.container);
   if (renderAll || __indexOf.call(ids, 'layout') >= 0) {
     circosJS.renderLayout(d3, svg, this);
   }
-  tracks = svg.append('g').attr('class', 'tracks').attr('transform', 'translate(' + parseInt(this.conf.width / 2) + ',' + parseInt(this.conf.height / 2) + ')');
+  tracks = svg.select('.tracks');
+  if (tracks.empty()) {
+    tracks = svg.append('g').attr('class', 'tracks').attr('transform', 'translate(' + parseInt(this.conf.width / 2) + ',' + parseInt(this.conf.height / 2) + ')');
+  }
   _ref = this.tracks;
   for (trackType in _ref) {
     trackStore = _ref[trackType];
@@ -1065,6 +1073,16 @@ circosJS.Core.prototype.render = function(ids, removeTracks) {
       track.render(this, tracks, name);
     }
   }
+  if (removeTracks) {
+    _ref1 = this.tracks;
+    for (trackType in _ref1) {
+      trackStore = _ref1[trackType];
+      for (name in trackStore) {
+        track = trackStore[name];
+        svg.select('.' + name).remove();
+      }
+    }
+  }
 };
 
 circosJS.Core.prototype.defaultConf = {

src/render.coffee

@@ -7,23 +7,25 @@ circosJS.Core.prototype.render = (ids, removeTracks) ->
   svg = d3.select @conf.container
 
   if renderAll or 'layout' in ids
-    circosJS.renderLayout d3, svg, this
+    circosJS.renderLayout d3, svg, @
 
-  tracks = svg.append 'g'
-    .attr 'class', 'tracks'
-    .attr 'transform', 'translate(' + parseInt(@conf.width/2) + ',' + parseInt(@conf.height/2) + ')'
+  tracks = svg.select('.tracks')
+  if tracks.empty()
+    tracks = svg.append 'g'
+      .attr 'class', 'tracks'
+      .attr 'transform', 'translate(' + parseInt(@conf.width/2) + ',' + parseInt(@conf.height/2) + ')'
 
   for trackType, trackStore of @tracks
     for name, track of trackStore
-      track.render this, tracks, name
+      track.render @, tracks, name
 
-  # if removeTracks
-  #   # remove all tracks to be sure to keep consistent data
-  #   # TODO: a smarter strategy could be implemented:
-  #   # remove tracks only if layout data changes
-  #   for trackType in types
-  #     for trackName in Object.keys(trackType.store)
-  #       svg.select('.' + trackName).remove()
+  if removeTracks
+    # remove all tracks to be sure to keep consistent data
+    # TODO: a smarter strategy could be implemented:
+    # remove tracks only if layout data changes
+    for trackType, trackStore of @tracks
+      for name, track of trackStore
+        svg.select('.' + name).remove()
 
   # renderBackgrounds = (d3Track, track, instance, d3, svg) ->
   #   backgrounds = track._backgrounds
@@ -98,5 +100,3 @@ circosJS.Core.prototype.render = (ids, removeTracks) ->
   #       preRender trackName, track, @, d3, svg, trackType.renderFunction
 
   return
-
-

src/tracks/Chord.coffee

@@ -31,7 +31,7 @@ circosJS.Chord = ->
   @renderChords = (parentElement, name, conf, data, layout, ratio, getSource, getTarget) ->
     track = parentElement
       .append 'g'
-      .attr 'class', name + ' ' + conf.colorPalette
+      .attr 'class', conf.colorPalette
 
     link = track
       .selectAll '.chord'
@@ -51,6 +51,10 @@ circosJS.Chord = ->
       link.attr 'fill', (d) -> d.color || conf.color
 
   @render = (instance, parentElement, name) =>
-    @renderChords parentElement, name, @conf, @data, instance._layout, @ratio, @getSource, @getTarget
+    parentElement.select('.' + name).remove()
+    track = parentElement.append 'g'
+      .attr 'class', name
+
+    @renderChords track, name, @conf, @data, instance._layout, @ratio, @getSource, @getTarget
 
   @

src/tracks/Heatmap.coffee

@@ -4,7 +4,7 @@ circosJS.Heatmap = ->
 
   @renderDatumContainer = (instance, parentElement, name, data, conf) =>
     track = parentElement.append 'g'
-      .attr 'class', name + ' ' + conf.colorPalette
+      .attr 'class', conf.colorPalette
 
     group = @renderBlock track, data, instance._layout
 

src/tracks/Histogram.coffee

@@ -4,7 +4,7 @@ circosJS.Histogram = ->
 
   @renderDatumContainer = (instance, parentElement, name, data, conf) =>
     track = parentElement.append 'g'
-      .attr 'class', name + ' ' + @conf.colorPalette
+      .attr 'class', @conf.colorPalette
     group = @renderBlock track, data, instance._layout
 
   @renderDatum = (parentElement, conf, layout, utils) ->

src/tracks/Stack.coffee

@@ -76,7 +76,7 @@ circosJS.Stack = ->
 
   @renderDatumContainer = (instance, parentElement, name, data, conf) =>
     track = parentElement.append 'g'
-      .attr 'class', name + ' ' + conf.colorPalette
+      .attr 'class', conf.colorPalette
     group = @renderBlock track, data, instance._layout
 
   @renderDatum = (parentElement, conf, layout, utils) ->

src/tracks/Track.coffee

@@ -68,7 +68,10 @@ circosJS.Track = ->
     return Math.floor(scope * x)
 
   @render = (instance, parentElement, name) =>
-    datumContainer = @renderDatumContainer instance, parentElement, name, @data, @conf
+    parentElement.select('.' + name).remove()
+    track = parentElement.append 'g'
+      .attr 'class', name
+    datumContainer = @renderDatumContainer instance, track, name, @data, @conf
     @renderAxes(datumContainer, @conf, instance._layout, @data) if @conf.axes?.display
     @renderDatum datumContainer, @conf, instance._layout, @