title: how to left align ticks in d3 bar chart
body: <p>i created a stacked bar graph.<br>
  on the y axis side i have ticks with varying lengths.
  what i am trying to accomplish is to align the text in the tick to the left.
  this is my example:<a href="http://jsfiddle.net/2khbceut/2/" rel="nofollow">http://jsfiddle.net/2khbceut/2/</a></p>
  
  <p>html  </p>
  
  <pre><code>&lt;title&gt;Diverging Stacked Bar Chart with D3.js&lt;/title&gt;
  &lt;body&gt;
      &lt;div id="figure" align="center" style="margin-bottom: 50px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>$(document).ready(getTopolegy());
  
  
  
  
  
  function getTopolegy(){
  
        var data = null;
          var links = parseTopology(data);
          createChart(links);
  
  }
  
  function parseTopology(data){
    var links=[{1:5,2:5,3:10,N:20,link_name: "Link CHGIL21CRS-SFXCA21CRS"},
              {1:5,2:5,3:10,N:20,link_name: "Link NYCNY21CRS-NYCNY22CRS"}];
  
    return links;  
  }
  
  function jsonNameToId(name){
    switch (allocated_priority) {
    case "allocated_priority":
      return 1;
    case "allocated_default":
      return 2;
    case "spare_capacity":
      return 3;
    case "total":
      return "N";
    default:
      return 999;
    }
  }
  
  function createChart(data){
    var margin = {top: 50, right: 20, bottom: 10, left: 210},
      width = 1000 - margin.left - margin.right,
      height = 100 - margin.top - margin.bottom;
  
  var y = d3.scale.ordinal()
      .rangeRoundBands([0, height], .3);
  
  var x = d3.scale.linear()
      .rangeRound([0, width]);
  
  var color = d3.scale.ordinal()
      .range(["#cccccc", "#92c6db", "#086fad"]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("top");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
  
  var svg = d3.select("#figure").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("id", "d3-plot")
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    color.domain(["Allocated Priority %", "Allocated Default %", "Spare Capacity %"]);
  
  
    // d3.csv("js/raw_data.csv", function(error, data) {
  
    data.forEach(function(d) {
      d["Allocated Priority %"] = +d[1]*100/d.N;
      d["Allocated Default %"] = +d[2]*100/d.N;
      d["Spare Capacity %"] = +d[3]*100/d.N;
  
      var x0 = 0;
      var idx = 0;
      d.boxes = color.domain().map(function(name) { return {name: name, x0: x0, x1: x0 += +d[name], N: +d.N, n: +d[idx += 1]}; });
  
    });
  
    var min_val = d3.min(data, function(d) {
            return d.boxes["0"].x0;
            });
  
    var max_val = d3.max(data, function(d) {
            return d.boxes["2"].x1;
            });
  
    x.domain([min_val, max_val]).nice();
    y.domain(data.map(function(d) { return d.link_name; }));
  
    svg.append("g")
        .attr("class", "x axis")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
  
    var vakken = svg.selectAll(".Link")
        .data(data)
      .enter().append("g")
        .attr("class", "bar")
        .attr("transform", function(d) { return "translate(0," + y(d.link_name) + ")"; });
  
    var bars = vakken.selectAll("rect")
        .data(function(d) { return d.boxes; })
      .enter().append("g").attr("class", "subbar");
  
    bars.append("rect")
        .attr("height", y.rangeBand())
        .attr("x", function(d) { return x(d.x0); })
        .attr("width", function(d) { return x(d.x1) - x(d.x0); })
        .style("fill", function(d) { return color(d.name); });
  
    bars.append("text")
        .attr("x", function(d) { return x(d.x0); })
        .attr("y", y.rangeBand()/2)
        .attr("dy", "0.5em")
        .attr("dx", "0.5em")
        .style("font" ,"10px sans-serif")
        .style("text-anchor", "begin")
        .text(function(d) { return d.n !== 0 &amp;&amp; (d.x1-d.x0)&gt;3 ? d.n : "" });
  
    vakken.insert("rect",":first-child")
        .attr("height", y.rangeBand())
        .attr("x", "1")
        .attr("width", width)
        .attr("fill-opacity", "0.5")
        .style("fill", "#F5F5F5")
        .attr("class", function(d,index) { return index%2==0 ? "even" : "uneven"; });
  
    svg.append("g")
        .attr("class", "y axis")
    .append("line")
        .attr("x1", x(0))
        .attr("x2", x(0))
        .attr("y2", height);
  
    var startp = svg.append("g").attr("class", "legendbox").attr("id", "mylegendbox");
    // this is not nice, we should calculate the bounding box and use that
    var legend_tabs = [0, 150, 300];
    var legend = startp.selectAll(".legend")
        .data(color.domain().slice())
      .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(" + legend_tabs[i] + ",-45)"; });
  
    legend.append("rect")
        .attr("x", 0)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);
  
    legend.append("text")
        .attr("x", 22)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "begin")
        .style("font" ,"10px sans-serif")
        .text(function(d) { return d; });
  
    d3.selectAll(".axis path")
        .style("fill", "none")
        .style("stroke", "#000")
        .style("shape-rendering", "crispEdges")
  
    d3.selectAll(".axis line")
        .style("fill", "none")
        .style("stroke", "#000")
        .style("shape-rendering", "crispEdges")
  
    var movesize = width/2 - startp.node().getBBox().width/2;
    d3.selectAll(".legendbox").attr("transform", "translate(" + movesize  + ",0)");
  
  // });
  
  
  
  }
  </code></pre>
  
  <p>as can be seen the current positioning of the tick text is to the right.
  i tried the following idea:   </p>
  
  <pre><code> svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
    .selectAll("text")
      .style("text-anchor", "start");
  </code></pre>
  
  <p>but it did not position the ticks in the desired alignment.
  any ideas?</p>