d3制作折线图

发表于 | 分类于 ，

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 <style>
        .container {
            margin: 30px auto;
            width: 600px;
            height: 300px;
            border: 1px solid #000;
        }
        .axis path,
        .axis line,
        .line {
            stroke: #000;
            fill: none;
        }
 </style>
<div class="tablebox">
    <div class="container">
        <svg width="100%" height="100%"></svg>
    </div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
        window.onload = function() {
            var width = 600, height = 300;
            // SVG画布边缘与图表内容的距离
            var padding = { top: 50, right: 50, bottom: 70, left: 50 };
            // 创建一个分组用来组合要画的图表元素
            var main = d3.select('.container svg').append('g')
                .classed('main', true)
                .attr('transform', "translate(" + padding.top + ',' + padding.left + ')');
            // 模拟数据
            var dataset = [
                {x: '2018-01-01', y: 11}, {x: '2018-01-02', y: 35},
                {x: '2018-01-03', y: 23}, {x: '2018-01-04', y: 78},
                {x: '2018-01-05', y: 55}, {x: '2018-01-06', y: 18},
                {x: '2018-01-07', y: 98}, {x: '2018-01-08', y: 100},
                {x: '2018-01-09', y: 22}, {x: '2018-01-10', y: 65}
            ];
            // 创建x轴的比例尺(线性比例尺)
            var format = d3.time.format("%Y-%m-%d");
           /* var xScale = d3.scale.linear()
                .domain(d3.extent(dataset, function(d) {
                    return d.x;
                }))
                .range([0, width - padding.left - padding.right]);*/
            var xScale = d3.time.scale()
                .domain([format.parse(dataset[0].x),
                    format.parse(dataset[dataset.length-1].x)])
                .range([0, width - padding.left - padding.right]);
            // 创建y轴的比例尺(线性比例尺)
            var yScale = d3.scale.linear()
                .domain([0, d3.max(dataset,function(d) {
                    return d.y;
                })])
                .range([height - padding.top - padding.bottom, 0]);
            // 创建x轴
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom')
                .tickFormat(d3.time.format("%Y-%m-%d"));
            // 创建y轴
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient('left');
            // 添加SVG元素并与x轴进行“绑定”
            main.append('g')
                .attr('class', 'x axis')
                .attr('transform', 'translate(0,' + (height - padding.top - padding.bottom) + ')')
                .call(xAxis)
                .selectAll("text")
                .attr("transform", "rotate(-70)")
                .style("text-anchor", "end");
            ;
            // 添加SVG元素并与y轴进行“绑定”
            main.append('g')
                .attr('class', 'axis')
                .call(yAxis);
            // 添加折线
            var line = d3.svg.line()
                .x(function(d) {
                    return xScale(format.parse(d.x))
                })
                .y(function(d) {
                    return yScale(d.y);
                })
                // 选择线条的类型
                .interpolate('linear');
            // 添加path元素，并通过line()计算出值来赋值
            main.append('path')
                .attr('class', 'line')
                .attr('d', line(dataset));
            // 添加点
            main.selectAll('circle')
                .data(dataset)
                .enter()
                .append('circle')
                .attr('cx', function(d) {
                    return xScale(format.parse(d.x));
                })
                .attr('cy', function(d) {
                    return yScale(d.y);
                })
                .attr('r', 5)
                .attr('fill', function(d, i) {
                    return getColor(i);
                });
        };
        function getColor(idx) {
            var palette = [
                '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
                '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
                '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
                '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
            ]
            return palette[idx % palette.length];
        }
    </script>
</div>

结果

点击查看 d3_demo.html

另外一个随机多折线demo d3_demo2.html

使用ECharts.js 制作折线图

请点击访问ECharts.js 制作折线图

参考地址

d3制作折线图
横坐标轴为日期
日期转换问题
刻度数
多折线