0

I use jquery and d3.js to draw a chart inside a message dialog.

How can I resize the d3.js chart without redrawing the entire chart?

The current solution works but is really inefficient: http://jsfiddle.net/L6UGn/61/ I did not figure out how to update the width, height without redrawing the entire chart.

My idea was update the width and height of the svg. Any idea how to approach it?

    d3.select('#msg_dialog > svg') //.selectAll("g")
    .attr('width', width)
    .attr('height', height);
Kayathiri
  • 779
  • 1
  • 15
  • 26
Arnold
  • 81
  • 1
  • 9
  • Either you can use the `viewBox` attribute on svg or you can redraw the chart. But `viewBox` may not be able to handle all conditions. So best way is to redraw the chart – murli2308 Jun 07 '16 at 05:35
  • redrawing seems not to be a good idea, because the chart may contain lots of data. as a consequence the redraw will slow down. my updated example uses viewBox: http://jsfiddle.net/L6UGn/62/ is that what you mean? what does the preserveAspectRatio do? – Arnold Jun 07 '16 at 14:44
  • 1
    http://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js – Alexey Ayzin Jun 07 '16 at 18:30
  • @Arnold `preserveAspectRatio` will do the uniform scale. It will preserve the aspect ratio (width to height ratio). Aso If you are not dealing with aspect ratio then `viewBox` is easiest way to do it. https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio – murli2308 Jun 08 '16 at 05:44

0 Answers0