title: Scaling D3 chart inside svg while keeping margins the same width?
body: <p>Working on rendering charts using D3 that has to scale to different resolutions. </p>
  
  <p>I would like to keep everything except the chart path itself at static size which includes all text, line thickness and margins. </p>
  
  <p>I think I have figured out how to handle everything except the margins and cant find anyone who has the same issue so hopefully someone can help.</p>
  
  <p>I've written a short test script that hopefully explains how I have my margins and everything else setup. The red are margins and the grey rectangle is where I draw my chart. Added a text element to show how I scale texts, line thickness etc.</p>
  
  <p>What I want to achieve is that the margin have a static width as I scale the window. If I scale the svg and make it 100px wider I want the red rectangle to become 100px wider while the red margins stay the same.</p>
  
  <p>I had been thinking about increasing the middle rectangle using the scale variable to have it increase "faster" but trying to use something like transform(scale on the rectangle in the resized() function produced unexpected results.</p>
  
  <pre><code>var margin = {top: 100, right: 150, bottom: 100, left: 150}
  
  var outerWidth  = 1600,
          outerHeight = 900;
  
  var width  = outerWidth - margin.right - margin.left,
          height = outerHeight - margin.top - margin.bottom;
  
  
  svg = d3.select(".plot-div").append("svg")
          .attr("class", "plot-svg")
      .style("background-color", "red")
          .attr("width", "100%")
      .attr("viewBox", "0 0 " + outerWidth + " " + outerHeight);
  
  
  g = svg.append("g")
      .attr("class", "plot-space")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .append("rect")
      .attr("width", width)
      .attr("height", height)
      .attr("fill", "grey");
  
  text = d3.select(".plot-space").append("text")
      .text("Text with the background")
      .attr("y", 50)
      .attr("x", 50)
      .attr("font-size", 16)
      .attr("font-family", "monospace")
      .attr("fill", "white");
  
  window.addEventListener("resize", resized);
  
  function resized(){
      var current_width = svg.node().getBoundingClientRect().width;
      var scale = outerWidth / current_width;
    text.attr("transform", "scale(" + scale + " " + scale + ")");
  
  }
  resized();
  </code></pre>
  
  <p>jsfiddle for you to play around with.
  <a href="https://jsfiddle.net/2tuompye/4/" rel="nofollow noreferrer">https://jsfiddle.net/2tuompye/4/</a></p>