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

Question

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

nat*_*e75 1 javascript charts d3.js nvd3.js

我根据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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

sai*_*aen 13

第二个字符是焦点图表 - 它允许用户选择和放大主图表的特定部分.要禁用它,只需将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;
});

Run Code Online (Sandbox Code Playgroud)

PS这是我用来找出答案的图表的实例:http://jsfiddle.net/7ms6041o/2/,focusEnable选项设置为false.

归档时间：	10 年，5 月前
查看次数：	4047 次
最近记录：	10 年，5 月前