title: d3.js how do I add text to Marimekko chart
body: <p>I am trying to add text to a working Marimekko chart. I understand that adding text to a rect requires that the rect and text need to be in a group. But the code I used as a base already uses a group. That is my main question, but I'd also like to make the x axes display the month rather than a %value.
  Is this mission impossible for a marimekko chart?</p>
  
  <pre><code>&lt;div id="chart"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div id="legend"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;script&gt;
  
  var width = 800,
  height = 500,
  margin = 20;
  
  var color = d3.scale.category10();
  
  var x = d3.scale.linear()
  .range([0, width - 3 * margin]);
  
  var y = d3.scale.linear()
  .range([0, height - 2 * margin]);
  
  var n = d3.format(",d"),
  p = d3.format("%");
  
  var svg = d3.select("#chart") .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + 2 * margin + "," + margin + ")");
  
  d3.json("/mydrupal/sites/default/d3_files/json/marimekko6.json", function(error,data) {
  var offset = 0;
  
  // Nest values by month. We assume each month + cause is unique.
  var months = d3.nest()
    .key(function(d) { 
       return d.month; 
       })
    .entries(data);
  
  // Compute the total sum, the per-month sum, and the per-cause offset.
  // You can use reduce rather than reduceRight to reverse the ordering.
  // We also record a reference to the parent cause for each month.
  var sum = months.reduce(function(v, p) {
  return (p.offset = v) + (p.sum = p.values.reduceRight(function(v, d) {
      d.parent = p;
      return (d.offset = v) + d.deaths;
      }, 0));
  }, 0);
  
  // Add x-axis ticks.
  var xtick = svg.selectAll(".x")
    .data(x.ticks(10))
  .enter().append("g")
    .attr("class", "x")
    .attr("transform", function(d) { 
       return "translate(" + x(d) + "," + y(1) + ")"; 
       });
  xtick.append("line")
    .attr("y2", 6)
    .style("stroke", "#000");
  xtick.append("text")
    .attr("y", 8)
    .attr("text-anchor", "middle")
    .attr("dy", ".71em")
    .text(p);
  
  // Add y-axis ticks.
  var ytick = svg.selectAll(".y")
    .data(y.ticks(10))
  .enter().append("g")
    .attr("class", "y")
    .attr("transform", function(d) { 
       return "translate(0," + y(1 - d) + ")"; 
     });
  ytick.append("line")
    .attr("x1", -6)
    .style("stroke", "#000");
  ytick.append("text")
    .attr("x", -8)
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(p);
  
  // Add a group for each cause.
  var months = svg.selectAll(".month")
    .data(months)
  .enter().append("g")
    .attr("class", "month")
    .attr("xlink:title", function(d) { return d.key; })
    .attr("transform", function(d) { 
       return "translate(" + x(d.offset / sum) + ")"; 
     });
  
  // Add a rect for each month.
   var causes = months.selectAll (".cause")
    .data(function(d) { return d.values; })
  .enter().append("a")
    .attr("class", "month")
    .attr("xlink:title", function(d) { return d.cause + " " + d.parent.key + ": " + n(d.deaths); })
  .append("rect")
    .attr("y", function(d) { 
       return y(d.offset / d.parent.sum); })
    .attr("height", function(d) { 
       return y(d.deaths / d.parent.sum); })
    .attr("width", function(d) { 
       return x(d.parent.sum / sum); })
    .style("fill", function(d) { 
       return color(d.cause); 
    });
  
  });
  
  &lt;/script&gt;
  </code></pre>