如何居中ndv3 lineChart

Question

我完全是 html 和 javascript 的菜鸟所以请原谅我的无知。我想创建一个 nvd3 图表。我正在将数据传递给 ndv3 并生成图表 html 文件。如何使图表居中，使其与中心而不是左侧对齐，以及如何将图例与右侧对齐。文件内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
</head>

<body>

    <div id="linechart_with_interactive_guideline">
        <svg style="width:600px;height:400px;"></svg>
    </div>

    <script>
        data_linechart_with_interactive_guideline = [{
            "values": [{
                "y": 2688202.88,
                "x": 1492297200000.0
            }, {
                "y": 7597414.21,
                "x": 1492383600000.0
            }, {
                "y": 2881684.29,
                "x": 1492470000000.0
            }, {
                "y": 5068672.55,
                "x": 1492556400000.0
            }, {
                "y": 3707031.11,
                "x": 1492642800000.0
            }, {
                "y": 4088938.01,
                "x": 1492729200000.0
            }],
            "key": "traffic",
            "yAxis": "1"
        }];

        nv.addGraph(function() {
            var chart = nv.models.lineChart().useInteractiveGuideline(true);

            chart.margin({
                top: 60,
                right: 60,
                bottom: 20,
                left: 80
            });

            var datum = data_linechart_with_interactive_guideline;

            chart.xAxis
                .tickFormat(function(d) {
                    return d3.time.format.utc('%d %b %Y')(new Date(parseInt(d)))
                });
            chart.yAxis
                .tickFormat(d3.format(',r'));

            chart.showLegend(true);

            d3.select('#linechart_with_interactive_guideline svg')
                .datum(datum)
                .transition().duration(500)
                .attr('width', 600)
                .attr('height', 400)
                .call(chart);

        });
    </script>

</body>

</html>

Answer 1

希望我能正确理解你的问题。我相信你想让你的图表成为浏览器的显示中心？如果这就是你要找的。像这样编辑您的代码

        <center>
        <svg style="width:600px;height:400px;"></svg>
        </center>

这是您可以使用 html 执行的最简单的方法。

如何居中ndv3 lineChart

How to center ndv3 lineChart

html

nvd3.js