为什么 NVD3.js 线加条形图示例呈现两个图表而不是一个？

Question

我根据库官网NVD3团队提供的示例代码整理了如下测试代码。出于某种原因，我总是看到页面上绘制了两个图表：一个在两个 Y 轴上有正确的标签，在 X 轴上有正确的标签，而第二个在垂直方向上压缩得更多，Y 轴上没有任何标签-axes 并且在 X 轴上似乎是数据数组索引。

下面的代码假定 D3 和 NVD3 都是最新版本，尽管即使使用网站链接到的旧版本 D3 时这种行为仍然存在。

在此先感谢您对此问题的任何帮助和见解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Line + Bar Chart | NVD3.js</title>
    <link rel="stylesheet" href="nv.d3.css"/>
    <style>
        #chart svg {
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart">
        <svg></svg>
    </div>
    <script src="d3.js"></script>
    <script src="nv.d3.js"></script>
    <script>
        var data = [
            {
                'key': 'foo',
                'bar': true,
                'color': 'skyblue',
                'values': [
                    [1431993600000, 31.6882],
                    [1432080000000, 76.1706],
                    [1432166400000, 76.2297],
                    [1432252800000, 75.1944],
                    [1432339200000, 75.1536],
                    [1432425600000, 74.528],
                    [1432512000000, 75.7265],
                    [1432598400000, 75.8659],
                    [1432684800000, 74.6283],
                    [1432771200000, 73.3533]
                ]
            },
            {
                'key': 'bar',
                'color': 'steelblue',
                'values': [
                    [1431993600000, 0.0002997961386257345],
                    [1432080000000, 0.0004418193656404055],
                    [1432166400000, 0.0003122142681920564],
                    [1432252800000, 0.00031651293181407124],
                    [1432339200000, 0.0003845457835685849],
                    [1432425600000, 0.00031934306569343066],
                    [1432512000000, 0.0005163317993040745],
                    [1432598400000, 0.00042575122683577205],
                    [1432684800000, 0.00025057518394496457],
                    [1432771200000, 0.00041715914621428076]
                ]
            }
        ];
        nv.addGraph(function () {
            var chart = nv.models.linePlusBarChart()
                    .margin({
                        top: 30,
                        right: 60,
                        bottom: 50,
                        left: 70
                    })
                    .x(function (d, i) {
                        return i;
                    })
                    .y(function (d, i) {
                        return d[1];
                    });

            chart.xAxis
                    .showMaxMin(true)
                    .tickFormat(function (d) {
                        var dx = data[0].values[d] && data[0].values[d][0] || 0;
                        return d3.time.format('%x')(new Date(dx));
                    });

            chart.y1Axis
                    .tickFormat(d3.format(',f'));

            chart.y2Axis
                    .tickFormat(function (d) {
                        return d3.format('g')(d)
                    });

            chart.bars.forceY([0, 200]);
            chart.lines.forceY([0]);

            d3.select('#chart svg')
                    .datum(data)
                    .transition()
                    .duration(0)
                    .call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
        });
    </script>
</body>
</html>

Answer 1

第二个字符是焦点图表 — 它允许用户 select 并放大主图表的特定部分。要禁用它，只需将 focusEnable 选项设置为 false，如下所示：

nv.addGraph(function () {
    var chart = nv.models.linePlusBarChart()
        .margin({
            top: 30,
            right: 60,
            bottom: 50,
            left: 70
        })
        .x(function (d, i) { return i; })
        .y(function (d, i) { return d[1]; });
        .options({focusEnable: false}); // here it is
    // ...
    return chart;
});

P.S。这是我用来找出答案的图表的实际示例：http://jsfiddle.net/7ms6041o/2/，focusEnable 选项设置为 false。

为什么 NVD3.js 线加条形图示例呈现两个图表而不是一个？

Why does the NVD3.js line plus bar chart example render two charts instead of one?

javascript

charts

d3.js

nvd3.js