D3。轴。为顺序刻度绘制轴的正确方法是什么

Question

我有一个呈现直方图的图表。

垂直绘制，水平x轴以“bin中的项目”为单位。我的问题是x轴。我不清楚如何配置d3.svg.axis()以在图表底部绘制带有单位的轴。事情有点复杂，因为我围绕y轴翻转了箱子的方向，以表明它们包含负值（向左翻转）或正值（向右翻转）。

更新

以下是相关代码。

托管我的直方图的对象。我删除了不相关的代码。 self.datasource是{id：name，score：score_value}

形式的对象数组

scarpa.ConnectivityScoreHistogram = function (dataset) {

    var self = this;

    this.histogramDataSource = d3.layout.histogram()
        .value (function(d) { return d.score; })
        .bins(binThresholds)
    (self.datasource);

    this.extent = d3.extent(this.histogramDataSource, histogramXDomainMapper);

    // Set domain for x and y scales. Range is set in renderer
    this.xScale = d3.scale.linear().domain(this.extent);

    this.yScale = d3.scale.ordinal().domain(this.histogramDataSource.map(histogramYDomainMapper));

};  

function histogramXDomainMapper(d) {
    return doPertCount(d);
}

function doPertCount(d) {
    return (d.x < 0) ? -(d.y) : d.y;
}

function histogramYDomainMapper(d) {
    return d.x.toString();
}

在数据连接时，我填写其余的比例，连接数据，并渲染直方图和轴。这里我只展示轴渲染。

histogram.yScale.rangeBands([bbox.height, 0], .125);

// scale range
histogram.xScale.range([0, histogram.scaleFactor * bbox.width]);

// axis
histogram.xAxis = d3.svg.axis();
histogram.xAxis.scale(histogram.xScale);
histogram.xAxis.orient("bottom");
histogram.xAxis.ticks(10);

// SVG element hierarchy buildout

// histogram group
histogramGroup = svg
    .append("g")
    .attr("id", label)
    .attr("transform", "translate(" + bbox.x + "," + bbox.y + ")");

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

轴不出现在屏幕上。但是SVG元素被添加到DOM层次结构中：