title: D3 - How to make visualization with a partition layout have equally divided sectors?
body: <p>I'm using D3 to achieve a visualization with a partition layout. What I need is the divided sections have equally the same width, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/0VhyS.png" alt="Desired outcome"></p>
  
  <p>But what I currently have is this:</p>
  
  <p><img src="https://i.stack.imgur.com/3GVib.png" alt="Current version"></p>
  
  <p>You can find the current version working <a href="http://codepen.io/anon/pen/Bfpmg" rel="nofollow noreferrer">here</a> on Codepen, but I copy the code here also:</p>
  
  <pre><code>var w = 960,
      h = 500,
      x = d3.scale.linear().range([0, w]),
      y = d3.scale.linear().range([0, h]),
      color = d3.scale.ordinal().range(["rgb(255,247,236)","rgb(254,232,200)","rgb(253,212,158)","rgb(253,187,132)","rgb(252,141,89)","rgb(239,101,72)","rgb(215,48,31)","rgb(179,0,0)","rgb(127,0,0)"]);
  
  var vis = d3.select("#chart").append("svg:svg")
      .attr("width", w)
      .attr("height", h);
  
  var partition = d3.layout.partition()
      .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
      .value(function(d) { return d.value; });
  
  var data = {
    'root': {
  
      'asdf': {
        'a': {
          'kdjfklsfj': 1,
          'kdjfklsfsj': 1
        },
        'b': 1
      },
  
      'bnm': {
        'c': 1,
        'd': {
          'lsdkjfdkljsf': {
            'lsdkfj': 1,
            'kldsjfdlk': 1
          },
          'kdjfkjsdfk': 1
        }
      }
  
    }
  };
  
  var rect = vis.selectAll("rect")
      .data(partition(d3.entries(data)[0]))
      .enter().append("svg:rect")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.dx); })
      .attr("height", function(d) { return y(d.dy); })
      .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
      .on("click", click);
  
  function click(d) {
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
  
    rect.transition()
      .duration(750)
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
  }
  </code></pre>
  
  <p>What I found is that altering the data values (currently all items are valued "1"), increase the width of the elements naturally, but how can I make it have a equally divided boxes?</p>