如何在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"),
}

输出如下：

Default output

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

Desired output

这可能吗？

由于

Answer 1

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

不是重新发明轮子，而是决定使用Amcharts。