运用D3.js实现折线图

最新推荐文章于 2024-01-09 15:01:39 发布

原创最新推荐文章于 2024-01-09 15:01:39 发布 · 482 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

如何使用D3.js实现折线图

D3（Data-Driven Documents） 是一个 JavaScript 函数库，用于实现数据可视化

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg id="articleContent"></svg>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="./html2pdf.bundle.min.js"></script>
    <script>
    var element = document.getElementById('articleContent')
      var opt = {
        margin: 1,
        filename: 'article.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      }
      html2pdf().from(element).set(opt).save()
        const margin = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 100
        };
        const width = 400;
        const height = 400
        const data = [1, 3, 4, 7, 8, 4, 3, 7]
        var svg = d3.selectAll('svg').attr('width', width).attr('height', height)
        var g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`)
        var scale_x = d3.scale.linear().domain([0, data.length - 1]).range([0, 340])
        var scale_y = d3.scale.linear().domain([0, d3.max(data)]).range([280, 0])
        var line_generator = d3.svg.line()
            .x(function(d, i) {
                return scale_x(i)
            })
            .y(function(d, i) {
                return scale_y(d)
            }).interpolate('cardinal')
        d3.select('g')
            .append('path')
            .attr('d', line_generator(data))
            .attr('fill', 'none')
            .attr('stroke', '#4682B4')
            .attr('stroke-width', 2.5)
        var x_axis = d3.svg.axis().scale(scale_x),
            y_axis = d3.svg.axis().scale(scale_y).orient('left')

        g.append('g').call(x_axis).attr('transform', `translate(${0}, ${280})`)
        g.append('g').call(y_axis).append('text').text('Price($)').attr('transform', 'rotate(-90)').attr('text-anchor', 'end').attr('dy', '1em')
    </script>
</body>

</html>