d3.js - 如何在 d3.js 水平条形图上有明确的边界

Question

我正在使用 NVD3 和 D3 创建一些简单的视觉效果，其中之一是水平条形图。选项包括：

{
    "type": "multiBarHorizontalChart",

    "height": 600,

    "showControls": false,
    "showValues": true,
    "duration": 500,
    "xAxis": {
        showMaxMin: false,
        axisLabelDistance: 400,
        axisLabelWidth: 500,
    },
    "yAxis": {
        "axisLabel": "",
        "tickFormat": function (d) { return d; }
    },
    "yDomain" : [0, 10000],
    x : (function(d) { return d.label }),
    y : (function(d) { return d.value }),

    showLegend: false,
    valueFormat: d3.format(".0f"),
}

输出如下：

默认输出

然而，项目风格的警察不喜欢图表的范围看起来是无限的，他们希望它看起来像这样：

期望的输出

这可能吗？

谢谢

Answer 1

这里的实际问题是构建在 D3 (NVD3) 之上的库如何选择绘制它的条形图。

与其重新发明轮子，不如决定使用 Amcharts。