美文网首页
svg/d3.js折线图展示数据

svg/d3.js折线图展示数据

作者: 尤樊容 | 来源:发表于2017-12-09 09:38 被阅读1366次

    初次接触d3.js,能感觉到它的强大,想要完全搞懂还是要花一番功夫,最近用它画了个折线图作为入门,以后还要多学习,请大家指教。
    这个例子是在网上找到的,然后自己看懂这些代码的意思,小调整了一下,作为笔记出现,方便下次参考。
    首先看一下效果图:


    image.png

    以下为源代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>d3折线图</title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="d3.v3.min.js"></script>
        <style>
    
            body {
                font: 10px sans-serif;
                margin: 50px;
            }
    
            .grid .tick {
                stroke: lightgrey;
                opacity: 0.7;
                shape-rendering: crispEdges;
            }
    
            .grid path {
                stroke-width: 0;
            }
    
            .axis path {
                fill: none;
                stroke: #bbb;
                shape-rendering: crispEdges;
            }
    
            .axis text {
                fill: #555;
            }
    
            .axis line {
                stroke: #e7e7e7;
                shape-rendering: crispEdges;
            }
    
            .axis .axis-label {
                font-size: 14px;
            }
    
            .line {
                fill: none;
                stroke-width: 1.5px;
            }
    
            .dot {
                /* consider the stroke-with the mouse detect radius? */
                stroke: transparent;
                stroke-width: 10px;
                cursor: pointer;
            }
    
            .dot:hover {
                stroke: rgba(68, 127, 255, 0.3);
            }
        </style>
    </head>
    <body>
    <div id="trendSvg"></div>
    </body>
    <script type="text/javascript">
        var data =  [
            [{'x':1,'y':0},{'x':2,'y':5},{'x':3,'y':10},{'x':4,'y':0},{'x':5,'y':6},{'x':6,'y':11},{'x':7,'y':9},{'x':8,'y':4},{'x':9,'y':11},{'x':10,'y':2}],
            [{'x':1,'y':1},{'x':2,'y':6},{'x':3,'y':11},{'x':4,'y':1},{'x':5,'y':7},{'x':6,'y':12},{'x':7,'y':8},{'x':8,'y':3},{'x':9,'y':13},{'x':10,'y':3}],
            [{'x':1,'y':2},{'x':2,'y':7},{'x':3,'y':12},{'x':4,'y':2},{'x':5,'y':8},{'x':6,'y':13},{'x':7,'y':7},{'x':8,'y':2},{'x':9,'y':4},{'x':10,'y':7}],
            [{'x':1,'y':3},{'x':2,'y':8},{'x':3,'y':13},{'x':4,'y':3},{'x':5,'y':9},{'x':6,'y':14},{'x':7,'y':6},{'x':8,'y':1},{'x':9,'y':7},{'x':10,'y':9}],
            [{'x':1,'y':4},{'x':2,'y':9},{'x':3,'y':14},{'x':4,'y':4},{'x':5,'y':10},{'x':6,'y':15},{'x':7,'y':5},{'x':8,'y':0},{'x':9,'y':8},{'x':10,'y':5}]
        ];
    
        var colors = [
            'steelblue',
            'green',
            'red',
            'purple'
        ];
    
        var margin = {top: 20, right: 30, bottom: 30, left: 50},
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;
    
        var x = d3.scale.linear()
                .domain([0, 12])
                .range([0, width]);
    
        var y = d3.scale.linear()
                .domain([-1, 16])
                .range([height, 0]);
    
        //x轴设置
        var xAxis = d3.svg.axis()
                .scale(x)
                .ticks(10)//调节刻度大小
                .tickSize(-height)
                .tickPadding(10)
                .tickSubdivide(true)
                .orient("bottom");
    
        //y轴设置
        var yAxis = d3.svg.axis()
                .scale(y)
                .tickPadding(10)
                .tickSize(-width)
                .tickSubdivide(true)
                .orient("left");
    
        //缩放拖拽
        var zoom = d3.behavior.zoom()
                .x(x)
                .y(y)
                .scaleExtent([-10, 10])//可缩放的范围
                .on("zoom", zoomed);
    
        var svg = d3.select("#trendSvg").append("svg")
                .call(zoom)
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
    
        svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);
    
        svg.append("g")
                .attr("class", "y axis")
                .append("text")
                .attr("class", "axis-label")
                .attr("transform", "rotate(-90)")
                .attr("y", (-margin.left) + 10)
                .attr("x", -height/2)
                .text('Axis Label');
    
        svg.append("clipPath")
                .attr("id", "clip")
                .append("rect")
                .attr("width", width)
                .attr("height", height);
    
        var line = d3.svg.line()
                .interpolate("linear")
                .x(function(d) { return x(d.x); })
                .y(function(d) { return y(d.y); });
    
        svg.selectAll('.line')
                .data(data)
                .enter()
                .append("path")
                .attr("class", "line")
                .attr("clip-path", "url(#clip)")
                .attr('stroke', function(d,i){
                    return colors[i%colors.length];
                })
                .attr("d", line);
    
    
        var points = svg.selectAll('.dots')
                .data(data)
                .enter()
                .append("g")
                .attr("class", "dots")
                .attr("clip-path", "url(#clip)");
    
        points.selectAll('.dot')
                .data(function(d, index){
                    var a = [];
                    d.forEach(function(point,i){
                        a.push({'index': index, 'point': point});
                    });
                    return a;
                })
                .enter()
                .append('circle')
                .attr('class','dot')
                .attr("r", 2)
                .attr('fill', function(d,i){
                    return colors[d.index%colors.length];
                })
                .attr("transform", function(d) {
                    return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
                );
    
        function zoomed() {
            svg.select(".x.axis").call(xAxis);
            svg.select(".y.axis").call(yAxis);
            svg.selectAll('path.line').attr('d', line);
    
            points.selectAll('circle').attr("transform", function(d) {
                return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
            );
        }
    </script>
    </html>
    

    相关文章

      网友评论

          本文标题:svg/d3.js折线图展示数据

          本文链接:https://www.haomeiwen.com/subject/pdruixtx.html