title: d3.js: tickformat - adding a % sign without multiplying by 100
body: <p>my data has percents as, for example, <code>[10.1, 3.2, 5.4]</code></p>
  
  <p><code>d3.format("0f")</code> will give me <code>[10, 3, 5]</code></p>
  
  <p><code>d3.format("0%")</code> will give me <code>[1010%, 320%, 540%]</code> (multiplies by 100)</p>
  
  <p>how do I get <code>[10%, 3%, 5%]</code>?</p>
  
  <p>I can't figure out where to add a +"%" to the first case
  or eliminate the *100 in the second case</p>
  
  <p>the relevant parts of the code:</p>
  
  <pre><code>var formatPercent = d3.format("0f");
  
  var min = 0; 
  var max = d3.max(data, function(d) { return + d[5]; });
  max = Math.round(max * 1.2); // pad it
  
  //define the x-axis
  var xAxis = d3.svg.axis()
                  .scale(x)
                  .orient('top')
                  .ticks(6)
                  .tickFormat(formatPercent);
  </code></pre>
  
  <p>and data comes in like this:</p>
  
  <pre><code>{
      "Geography": [
      ["Midwest", 234017797, 498, 8.2, 9.0, 11.3],
      ["Northeast", 265972035, 566, 8.9, 12.1, 13.1],
      ["South", 246235593, 524, 8.1, 8.3, 10.8],
      ["West", 362774577, 772, 9.4,9.9, 11.7]
      ]
  }
  </code></pre>
  
  <p>It's the last three numbers in each line that are the percentage values I'm using to chart ranges. I want the x-axis to be formatted in integer+% format based on the high and low values in the data.</p>
  
  <p>Thank you!</p>