d3 Гистограмма с накоплением показывает значения x без пропуска

Question

Я создал следующую гистограмму с накоплением d3

var ContainersStackedBarChart = function() {
"use strict";

var stackedBarChartData = [{
    key: 'Packed',
    'color' : COLOR_RED,
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 20}, { x:5, y: 57}, { x:6, y: 42}, { x:7, y: 12}, { x:8, y: 65}, { x:9, y: 34}, { x:10, y: 52}
    ]
},{
    key: 'Un-Packed',
    'color' : COLOR_ORANGE,
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 45}, { x:5, y: 67}, { x:6, y: 34}, { x:7, y: 43}, { x:8, y: 65}, { x:9, y: 32}, { x:10, y: 12}, 

    ]
}];

nv.addGraph({
    generate: function() {
        var stackedBarChart = nv.models.multiBarChart()
            .stacked(true)
            .showControls(false);

        var svg = d3.select('#containersbycarrier').append('svg').datum(stackedBarChartData);
        svg.transition().duration(0).call(stackedBarChart);
        return stackedBarChart;
    }
});
};

, но проблема при увеличении данных не показывает значения оси x

Я хочу показать полные метки оси x, возможно, за счет уменьшения ширины полосы.

Я пробовал использовать это

svg.scale.ordinal().range([0, stackedBarChartData.length * 50]);

, но не работал

Answer 1

Вам нужно добавить .reduceXTicks (false), чтобы показать все тики.

var stackedBarChartData = [{
    key: 'Packed',
    'color' : 'red',
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 20}, { x:5, y: 57}, { x:6, y: 42}, { x:7, y: 12}, { x:8, y: 65}, { x:9, y: 34}, { x:10, y: 52}
    ]
},{
    key: 'Un-Packed',
    'color' : 'green',
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 45}, { x:5, y: 67}, { x:6, y: 34}, { x:7, y: 43}, { x:8, y: 65}, { x:9, y: 32}, { x:10, y: 12}, 

    ]
}];

nv.addGraph({
    generate: function() {
        var stackedBarChart = nv.models.multiBarChart()
            .stacked(true)
            .reduceXTicks(false) 
            .showControls(false);



        var svg = d3.select('#containersbycarrier').append('svg').datum(stackedBarChartData);

       svg.transition().duration(0).call(stackedBarChart);
        return stackedBarChart;
    }
});

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
<div id="containersbycarrier"></div>