RangeRoundBands outerPadding в гистограмме слишком большой

Я новичок в D3.js и имею проблему с моей вертикальной гистограммой. По какой-то причине расстояние между осью и полосками слишком велико, когда я использую rangeRoundBands для масштабирования. В API это объясняется следующим образом:

Таким образом, проблема заключается в том, что проблема заключается в том, что это внешняя оболочка. Но установка внешнего пакета на ноль не помогает. Однако, когда я использую диапазоны диапазонов, проблема исчезает, и бары расположены правильно, прямо под осью. Но тогда я получу эти неприятные эффекты сглаживания, так что это не вариант. Вот мой код:

var margin = {top: 40, right: 40, bottom: 20, left: 20},
    width = 900 - margin.left - margin.right,
            height = x - margin.top - margin.bottom;

    var x = d3.scale.linear().range([0, width]);

    var y = d3.scale.ordinal().rangeRoundBands([0, height], .15, 0);

    var xAxis = d3.svg.axis()
            .scale(x)
            .orient("top");

    var xAxis2 = d3.svg.axis()
            .scale(x)
            .orient("bottom");

    var xAxis3 = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickSize(-height, 0, 0)
            .tickFormat("");

    var svg = d3.select("#plotContainer").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    x.domain(d3.extent(data, function(d) {
        return d.size;
    })).nice();
    y.domain(data.map(function(d) {
        return d.name;
    }));

    svg.append("g")
            .attr("class", "x axis")
            .call(xAxis);
    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis2);
    svg.append("g")
            .attr("class", "grid")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis3);

    svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", function(d) {
                return d.size < 0 ? "bar negative" : "bar positive";
            })
            .attr("x", function(d) {
                return x(Math.min(0, d.size));
            })
            .attr("y", function(d) {
                return y(d.name);
            })
            .attr("width", function(d) {
                return Math.abs(x(d.size) - x(0));
            })
            .attr("height", y.rangeBand())
            .append("title")
            .text(function(d) {
                return "This value is " + d.name;
            });
    ;

    svg.selectAll(".bar.positive")
            .style("fill", "steelblue")
            .on("mouseover", function(d) {
                d3.select(this).style("fill", "yellow");
            })
            .on("mouseout", function(d) {
                d3.select(this).style("fill", "steelblue");
            });

    svg.selectAll(".bar.negative")
            .style("fill", "brown")
            .on("mouseover", function(d) {
                d3.select(this).style("fill", "yellow");
            })
            .on("mouseout", function(d) {
                d3.select(this).style("fill", "brown");
            });

    svg.selectAll(".axis")
            .style("fill", "none")
            .style("shape-rendering", "crispEdges")
            .style("stroke", "#000")
            .style("font", "10px sans-serif");

    svg.selectAll(".grid")
            .style("fill", "none")
            .style("stroke", "lightgrey")
            .style("opacity", "0.7");

    svg.selectAll(".grid.path")
            .style("stroke-width", "0");

EDIT: Пожалуйста, взгляните на эту скрипку: http://jsfiddle.net/GUYZk/9/

Моя проблема воспроизводится там. Вы не можете изменить внешний Паддинг с помощью rangeRoundBands, тогда как диапазонBands ведет себя нормально.

Ответы

// set your desired gap between y-axis and first bar
var yGap = 5;

// create your scale
var xScale = d3.scale.ordinal()
  .domain(dataArray)
  .rangeRoundBands([0, width], .1);

// obtain the *computed* left edge of the first bar
var leftOuter = xScale.range()[0];

// when setting the x attribute of your rects:
  .attr("x", function(d) { return xScale(d) - leftOuter + yGap; });

width: (1.0 - padding) * xScale.rangeBand()

x: padding * xScale.rangeBand() / 2