在D3的垂直條形圖中的條形上添加標簽，並刪除Y軸

Question

我的問題是我想刪除Y軸，而是將Y值作為標簽放置在條形之外。 我該怎么做呢？ 注意我將Y軸設置為40，因為我計划在右邊添加另一個圖，並需要它們使Y軸處於相同比例。 另外，如何減小條形的寬度。 我不要他們碰 我希望各條之間有空白。

這是我要修復的各種基本圖形的以下數據和代碼

var data = {
"age": ["25-29", "30-34", "35-39", "40-44", "45-50"],
"value": [28, 15, 11, 10, 8]
}

draw(data);

function draw(data) {
var margin = {
        "top": 10,
        "right": 10,
        "bottom": 30,
        "left": 50
    },
    width = 700,
    height = 300;

var x = d3.scale.ordinal()
    .domain(data.age.map(function(d) {
        return d.substring(0, 5);}))
    .rangeRoundBands([0, width], 0);


var y = d3.scale.linear()
    .domain([0, 40/*d3.max(data.value)*/])
    .range([height, 0]);

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

var yAxis = d3.svg.axis().scale(y).orient("left");

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

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

svgContainer.append("g")
    .attr("class", "y axis").call(yAxis)
    .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end");

svgContainer.selectAll(".bar").data(data.value).enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d, i) {
        return i * x.rangeBand();
    })
    .attr("y", function(d) {
        return y(d);
    })
    .attr("width", function(){
        return x.rangeBand();
    })
    .attr("height", function(d) {
        return height -y(d);
    });
}

Answer 1

如果不想顯示y軸，則無需創建。

對於文本標簽，可以這樣創建它們：

svg.selectAll(".label")
    .data(data)
    .enter().append("svg:text")
        .attr("class", "label")
        .attr("x", function(d) {
            return x(d[X_AXIS_COLUMN]) + x.rangeBand() / 3;
        })
        .attr("y", function(d) {
            return y(d[Y_AXIS_COLUMN]) - 5;
        })
        .text(function(d) {
            return Y_DATA_FORMAT(d[Y_AXIS_COLUMN]);
        });

這是我的示例：

http://vida.io/documents/bYRhZDRS7MGrArSjC

對於您的第二個問題，請玩此積木到您想要的位置：

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1);