title: Dimple - adding custom shapes to a responsive chart
body: <p>I'm coding a dimple based bubble chart, which for some z-values removes a bubble and draws a big red X instead, which is an svg path created by line interpolation like this:</p>
  
  <pre><code>var points = [{"x":x-edgeSize,"y":y+edgeSize},
                            {"x":x,"y":y},
                            {"x":x+edgeSize,"y":y-edgeSize},
                            {"x":x,"y":y},
                            {"x":x-edgeSize,"y":y-edgeSize},
                            {"x":x,"y":y},
                            {"x":x+edgeSize,"y":y+edgeSize},
                            {"x":x,"y":y}];
  var lineFunction = d3.svg.line()
                  .x(function(d) { return d.x; })
                  .y(function(d) { return d.y; })
                  .interpolate("linear");
  var path = graphSelection.append("path").attr("d",lineFunction(points))
                      .attr("stroke",color)
                      .attr("stroke-width",lineWidth);
  </code></pre>
  
  <p>Now, I want it to be responsive and I followed dimple's example for responsive charts:
  <a href="http://dimplejs.org/advanced_examples_viewer.html?id=advanced_responsive_sizing" rel="nofollow">Dimple - Responsive sizing</a> and now all the sizes and bounds are by % and I'm calling draw on resize:</p>
  
  <pre><code>this.chart.draw(this.delay,true);
  </code></pre>
  
  <p>The problem is that the red Xs don't move by themselves, obviously. </p>
  
  <p>So I tried to move it independently on resize, but I don't know the right coordinates until the transition ends - which makes it a 2 step transition.</p>
  
  <p>Will adding the X-path to series.shapes help? will it move along with the other bubbles?</p>
  
  <p>Is there a standard way of doing this?</p>
  
  <p>Thanks</p>