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
        }
    };

屏幕截图：

X 轴标签重叠 NVD3

X-axis labels overlap NVD3

javascript

jquery

nvd3.js