编辑 NVD3 折线图网格答案

【问题标题】：Edit NVD3 lineChart grid编辑 NVD3 折线图网格
【发布时间】：2015-01-18 21:59:29
【问题描述】：

我正在处理项目，我正在使用 NVD3 lineChart，但我无法编辑图表的网格。

这是图表的选项：

chart: {
        type: 'lineChart',
        height: 430,
        margin: {
            top: 20,
            right: 20,
            bottom: 80,
            left: 40
        },
        x: function (d) {
            return d.x;
        },
        y: function (d) {
            return d.y;
        },
        useInteractiveGuideline: true,
        xAxis: {
            axisLabel: 'Date',
            showMaxMin: false,
            tickFormat: function (d) {
                return d3.time.format('%b %d')(new Date(d));
            },
            reduceXTicks: false,
            ticks: 13
        },
        yAxis: {
            axisLabel: 'People count',
            tickFormat: function (d) {
                return d3.format('1d')(d);
            }
        }
    },
    title: {
        enable: true,
        text: 'People count Vs Date'
    }

例如，如果有 7 个值，我希望有 7 个网格 x 轴。

注意：通过将刻度值编辑为任何数字，网格不会改变。

这是当前图表

https://www.dropbox.com/s/yfin991k0ovycnv/chart.png?dl=0

那么，如何编辑图表网格？

【问题讨论】：

标签： angularjs d3.js nvd3.js linechart

【解决方案1】：

lineChart 模型将轴公开为 xAxis 和 yAxis，它们也有选项。例如，您可以这样做：

var chart = nv.models.lineChart();
chart.xAxis.ticks(1);
chart.yAxis.tickVAlues([1,2,3,4,5]);

这些选项中的大多数都是基于 D3 选项的，对于上面的示例，请参见：

https://github.com/mbostock/d3/wiki/SVG-Axes#ticks（tickValues 就在那个下方）

有关 nvd3 中轴选项的完整列表，请参阅此处来自社区分支的文档：

https://nvd3-community.github.io/nvd3/examples/documentation.html#axis

【讨论】：