javascript - X 轴标签重叠 NVD3

Question

我在我的应用程序中使用 NVD3 图表。我无法理解为什么 X 轴标签在我的图表中重叠。有人可以帮我吗？

我尝试使用 .ticks(3) 设置刻度数，但它似乎不会影响刻度数。

        nv.addGraph(function () {
                var chart = nv.models.lineChart()
                        .x(function (d) {
                            return d[0];
                        })
                        .y(function (d) {
                            return d[1];
                        })
                        .showXAxis(true)
                        .showYAxis(false)
                        .useInteractiveGuideline(true);

                chart.xAxis     //Chart x-axis settings
                        .axisLabel('Time')
                        .tickFormat(function (d) {
                            var dateTimeFormat = '%m/%d/%Y %H:%M';
                            d = new Date(d);
                            return d3.time.format(dateTimeFormat)(d);

                        });
                chart.yAxis
                        .axisLabel('Size');
                chart.forceY([0]);

                d3.select('#id svg')
                        .datum(graphData)
                        .call(chart);

                nv.utils.windowResize(chart.update);

                return chart;
            });

Answer 1

我使用的是Angular-nvD3，我们可以使用wrapLabels:true来避免重叠问题。

图表配置示例。

vm.options = {
        chart: {
            type: 'discreteBarChart',
            x: function(d){return d.label;},
            y: function(d){return d.value;},
            wrapLabels:true
        }
    };

屏幕截图: