Scaling a D3.js Bullet Chart keeps messing up

Question

I am new to D3.js and I am drawing a bullet chart for a website I am working on. I took the code from here as a starting point:

http://bl.ocks.org/jugglinmike/6004102

I have a chart drawn, and for a basic case, I do not need to worry about switching the data shown. I really need to, however, have the entire chart and all of its elements scale with the window resize.

Right now, I have two files, bullet.js and draw_bullet.js. This is the code for draw_bullet.js:

var margin = {top: 5, right: 40, bottom: 20, left: 120},
width = ($(window).width() * .3) - margin.left - margin.right,
height = 50 - margin.top - margin.bottom;

var chart = d3.bullet()
.width(width)
.height(height);

function fillChart() {
    d3.json("/static/response.json", function(error, data) {
    var svg = d3.select("#zone1").selectAll("svg")
        .data(data)
        .enter().append("svg")
        .attr("class", "bullet")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(chart1);

    var title = svg.append("g")
        .style("text-anchor", "end")
        .attr("transform", "translate(-6," + height / 2 + ")");

    title.append("text")
        .attr("class", "title")
        .text(function(d) { return d.title; });

    title.append("text")
        .attr("class", "subtitle")
        .attr("dy", "1em")
        .text(function(d) { return d.subtitle; });

    });
}

And my code for bullet.js:

d3.bullet = function() {
  var orient = "left", // TODO top & bottom
  reverse = false,
  duration = 0,
  ranges = bulletRanges,
  measures = bulletMeasures,
  width = parseInt(d3.select("#zone1").style("width"), 10),
  height = 30,
  tickFormat = null;

  // For each small multiple…
  function bullet(g) {
    g.each(function(d, i) {
      var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
      measurez = measures.call(this, d, i).slice().sort(d3.descending),
      g = d3.select(this);

  // Compute the new x-scale.
  var x1 = d3.scale.linear()
      .domain([0, Math.max(rangez[0], measurez[0])])
      .range(reverse ? [width, 0] : [0, width]);

  // Retrieve the old x-scale, if this is an update.
  var x0 = this.__chart__ || d3.scale.linear()
      .domain([0, Infinity])
      .range(x1.range());

  // Stash the new scale.
  this.__chart__ = x1;

  // Derive width-scales from the x-scales.
  var w0 = bulletWidth(x0),
      w1 = bulletWidth(x1);

  // Update the range rects.
  var range = g.selectAll("rect.range")
      .data(rangez);

  range.enter().append("rect")
      .attr("class", function(d, i) { return "range s" + i; })
      .attr("width", w0)
      .attr("height", height)
      .attr("x", reverse ? x0 : 0)
    .transition()
      .duration(duration)
      .attr("width", w1)
      .attr("x", reverse ? x1 : 0);

  range.transition()
      .duration(duration)
      .attr("x", reverse ? x1 : 0)
      .attr("width", w1)
      .attr("height", height);

  // Update the measure rects.
  var measure = g.selectAll("rect.measure")
      .data(measurez);

  measure.enter().append("rect")
      .attr("class", function(d, i) { return "measure s" + i; })
      .attr("width", w0)
      .attr("height", height / 3)
      .attr("x", reverse ? x0 : 0)
      .attr("y", height / 3)
    .transition()
      .duration(duration)
      .attr("width", w1)
      .attr("x", reverse ? x1 : 0);


  measure.transition()
      .duration(duration)
      .attr("width", w1)
      .attr("height", height / 3)
      .attr("x", reverse ? x1 : 0)
      .attr("y", height / 3);

  // Compute the tick format.
  var format = tickFormat || x1.tickFormat(8);

  // Update the tick groups.
  var tick = g.selectAll("g.tick")
      .data(x1.ticks(8), function(d) {
        return this.textContent || format(d);
      });

  // Initialize the ticks with the old scale, x0.
  var tickEnter = tick.enter().append("g")
      .attr("class", "tick")
      .attr("transform", bulletTranslate(x0))
      .style("opacity", 1e-6);

  tickEnter.append("line")
      .attr("y1", height)
      .attr("y2", height * 7 / 6);

  tickEnter.append("text")
      .attr("text-anchor", "middle")
      .attr("dy", "1em")
      .attr("y", height * 7 / 6)
      .text(format);

  // Transition the entering ticks to the new scale, x1.
  tickEnter.transition()
      .duration(duration)
      .attr("transform", bulletTranslate(x1))
      .style("opacity", 1);

  // Transition the updating ticks to the new scale, x1.
  var tickUpdate = tick.transition()
      .duration(duration)
      .attr("transform", bulletTranslate(x1))
      .style("opacity", 1);

  tickUpdate.select("line")
      .attr("y1", height)
      .attr("y2", height * 7 / 6);

  tickUpdate.select("text")
      .attr("y", height * 7 / 6);

  // Transition the exiting ticks to the new scale, x1.
  tick.exit().transition()
      .duration(duration)
      .attr("transform", bulletTranslate(x1))
      .style("opacity", 1e-6)
      .remove();
  });
  d3.timer.flush();
  }

  // left, right, top, bottom
  bullet.orient = function(x) {
    if (!arguments.length) return orient;
    orient = x;
    reverse = orient == "right" || orient == "bottom";
    return bullet;
  };

  // ranges (bad, satisfactory, good)
  bullet.ranges = function(x) {
    if (!arguments.length) return ranges;
    ranges = x;
    return bullet;
  };


  // measures (actual, forecast)
  bullet.measures = function(x) {
    if (!arguments.length) return measures;
    measures = x;
    return bullet;
  };

  bullet.width = function(x) {
    if (!arguments.length) return width;
    width = x;
    return bullet;
  };

  bullet.height = function(x) {
    if (!arguments.length) return height;
    height = x;
    return bullet;
  };

  bullet.tickFormat = function(x) {
    if (!arguments.length) return tickFormat;
    tickFormat = x;
    return bullet;
  };

  bullet.duration = function(x) {
    if (!arguments.length) return duration;
    duration = x;
    return bullet;
  };

  return bullet;
};

function bulletRanges(d) {
  return d.ranges;
}

function bulletMeasures(d) {
  return d.measures;
}

function bulletTranslate(x) {
  return function(d) {
  return "translate(" + x(d) + ",0)";
};
}

function bulletWidth(x) {
  var x0 = x(0);
  return function(d) {
    return Math.abs(x(d) - x0);
  };
}

})();

I am using jQuery and I know I have to embed a function in $(window).resize(), however I have tried many different things and none of them seem to adjust correctly. I try to set chart.width() to my new value in the function, and later when I call the width of the chart, it shows it as being my new value, but doesn't adjust its view on the screen. Is it necessary to redraw the entire chart and all its elements to resize? And then, also, when I tried to rescale the range for the chart, I found it very difficult to do so because the range variable is embedded in the anonymous function inside of bullet.js. Any help you can provide in pointing me in the right direction would be awesome. I tried using this tutorial, but it didn't seem to apply to my situation too much because they are different types of charts.

http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/

Thanks!