d3.js绘制多组曲线图

最新推荐文章于 2022-02-18 14:52:15 发布

风/xin云

最新推荐文章于 2022-02-18 14:52:15 发布

阅读量278

点赞数

分类专栏： D3 文章标签：气泡图基因气泡图

本文链接：https://blog.csdn.net/zhouyonggo/article/details/82626545

版权

D3 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、json数据：

{
	"data": [
		[[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012],[10.184,10.336,10.473,10.848,11.349,11.978,12.167,12.327,12.339,12.064,12.09,12.12,11.94,11.562,11.208,10.974,10.948,10.983,10.76,10.694,10.534,10.273,10.364,10.421,10.357,10.316,10.472,10.94,11.314,11.485,11.488,11.606,11.479,11.091,11.288,11.354,11.501,11.302,10.968,11.026,10.944,11.08,11.388,11.504,11.279,10.683,10.533,10.505,10.305,10.146,10.148,9.501,9.366,9.23,9.067,8.956,8.935,13.833,12.524,11.441,10.651,9.961,4.566,4.617,4.728,4.823,4.844,4.856,4.87,4.702,4.679,4.674,4.641,4.47,4.688,4.798,4.756,4.903,4.919,5.017,4.938,4.879,4.831,4.623,3.887,3.502,3.083,3.123,3.073,2.922,2.827,2.805,2.605,2.743,2.698,2.513,2.41,2.17,2.288,2.308,2.222,2.183,2.224,2.163,2.223,2.142,2.257,2.015,1.971,1.894,1.848,1.835,1.85,2.036,1.827,1.904,1.803,1.852,1.866,1.906,1.956,1.954,1.734,1.904,1.899,2.001,1.966,1.844,1.879,1.856,1.837,1.827,1.907,1.729,1.74,1.68,1.797,1.811,1.941,2.026,2.217,2.281,2.517,2.673,2.702,2.893,3.016,3.073,3.126,3.283,3.361,3.33,3.465,3.916,4.49,5.074,5.717,6.523,7.012,6.726,7.095,7.471,7.824,7.802,4.441,4.625,4.696,4.861,4.768,4.889,5.281,5.36,5.419,5.137,5.278,5.151,4.934,4.952,4.742,4.666,4.525,4.126,4.228,4.334,4.383,5.287,5.088,5.28,5.274,5.251,5.413,5.365,5.372,5.512,4.839,5.099,5.196,5.219,5.094,5.582,5.91,5.952,6.012,5.854,5.789,5.465,5.525,5.659,5.67,5.173,5.033,5.318,5.289,5.226,5.15,5.106,4.989,5.103,5.288,5.428,5.363,5.026,5,4.941,4.872,4.751,4.408,4.425,4.301,4.134,4.171,4.272,4.34,4.543,4.826,5.381,5.374,5.433,5.483,5.539,5.869,6.956,7.443,7.654,8.005,8.181,8.386,9.202,9.51,9.66,9.141,8.79,8.747,8.949,9.188,9.625,10.154,10.173,10.361,11.186,11.226,11.091,10.899,10.945,10.892,9.618,9.092,8.465,7.864,7.396,7.076,7.053,6.772,6.958,7.202,6.93,6.857,7.007,7.059,7.099,7.025,6.95,7.116,6.331,6.39,6.571,6.571,6.604,6.407,6.371,6.348,6.348,5.995,6.162,6.287,6.241,6.033,6.083,6.313,6.118,5.78,5.698,5.804,5.743,5.655,5.976,6.005,6.06,5.988,6.021,6.049,5.882,5.296,5.142,4.701,4.701,4.647,4.491,4.48,4.384,4.263,4.515,4.721,5.084,6.225,6.302,6.409,6.52,6.462,6.525,6.816,6.656,6.566,6.34,6.177,6.143,7.462,7.783,7.885,7.998,8.182,8.352,8.32,8.5,8.967,8.474,8.178,7.89,7.436,7.634,7.777,7.628,7.189,6.787,6.048,6.003,6.189,6.216,6.389,6.353,7.341,7.899,7.849,7.757,7.314,7.134,6.858,6.689,6.526,5.909,5.138,4.617,4.339,4.558,4.493,4.545,4.419,4.245,4.468,5.093,5.737,6.215,6.613,6.876,7.566,7.586,7.901,7.736,7.23]],
		[[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012]],
		[[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012]],
        [[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012]],
        [[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012]],
        [[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012]],
        [[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012]],
        [[6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012]]
	],

	"words":[["word1", "word2"], ["word1", "word2"], ["word1", "word2"]],
	"params":{"title":"这是标题测试"},
    "bg_colors":["#388E3C", "#F44336", "#0288D1", "#FF9800", "#727272", "#E91E63", "#673AB7", "#8BC34A"],
	"size":{"width":700}
}

参数说明：

用途:多组折线图
*data,三维数组(每组里面支持多条曲线的绘制)
title:标题
words: 每组的上、下标题
bg_colors: 每组的背景色
*width:宽度, height:自动计算，根据每组的宽度和总宽度来算总高度

以下为toolip的样式：

<style>
.bubble_tooltip{  
            font-family:simsun;  
            font-size:16px;  
            width:120;  
            height:auto;  
            position:absolute;   
            text-align:center;  
            border-style:solid;  
            border-width:1px;  
            background-color:white;  
            border-radius:5px;    
        }  
</style>

二、用到的js插件
#jquery插件

/* globals jQuery: true, d3: true */
var graph = {

	variousLine:function(container, content) {
		if (typeof(content.data) == 'undefined') {
			alert('data不能为空');
			return false;
		}

        /* 每个格子的宽高*/
        var per_width = 70;
        var per_height = 70;
        
        var grid_margin = 10;
        
        /* 边距*/
        var padding = {top:50, right:30, bottom:50, left:50};
		
        var width  = content.size.width;

        var main_width = (width-padding.left-padding.right);

        /*计算每一层级能放几个矩形*/
        var per_level_count = Math.floor(main_width / (per_width+grid_margin));

        var height = Math.ceil(Math.round((per_width + content.data.length) * content.data.length)/main_width) * (per_height + grid_margin) + padding.top+padding.bottom;
        
		var colors = ["#388E3C", "#F44336", "#0288D1", "#FF9800", "#727272", "#E91E63", "#673AB7", "#8BC34A", "#2196F3", "#D32F2F", "#FFC107", "#BDBDBD", "#F8BBD0", "#3F51B5", "#CDDC39", "#009688", "#C2185B", "#FFEB3B", "#212121", "#FFCCBC", "#BBDEFB", "#0099CC", "#FFcc99"];

        var svg = d3.select('#'+container).append('svg')
            .attr('version', '1.1')
			.attr('style', 'font-family:arial;background:#ccc')
			.attr('xmlns', 'http://www.w3.org/2000/svg')
			.attr('width', width)
			.attr('height', height);

        
        var title = svg.append('text').text(content.params.title);
        
        /*计算标题长度*/
        var title_length = title.node().getComputedTextLength();
        title.attr('transform', 'translate('+((width-title_length)/2)+', '+padding.top/2+')');

        /*用于得到每个曲线图的最长坐标*/
        var lengths = [];
        /*用于得到每个曲线的最大值*/
        var maxs    = [];
        for (var i in content.data) {
            var temp = [];
            for (var j in content.data[i]) {
                lengths.push(content.data[i][j].length);
                temp.push(d3.max(content.data[i][j]));
            }
            maxs.push(d3.max(temp));
        }

        /*坐标刻度*/
        var categories = [];

        /* 设置填充x轴的刻度*/
        for (i = 1; i<= d3.max(lengths); i++) {
            categories.push(i);
        }

        /*新建x,y轴比例尺*/

        

        /* x轴可以获取一个最长的*/
        var x_scale = d3.scale.linear()
                .domain([0, d3.max(categories)])
                .range([0, per_width]);
        var main = svg.append('g').attr('transform', "translate("+padding.left+", "+padding.top+")").attr('class', 'main');
        for (var i in content.data){
            // y轴比例尺和具体的一组数据有关
            var y_scale = d3.scale.linear()
                .domain([0, maxs[i]])
                .range([per_height, 0]);
            var xaxis = d3.svg.axis()
			.scale(x_scale)
			.orient('bottom')
		
            var yaxis = d3.svg.axis()
                .scale(y_scale)
                .orient('left');

            /*绘制path专用*/
            var line = d3.svg.line()
                .x(function(d,i) {
                    return x_scale(categories[i]);
                })
                .y(function(d) {
                    return y_scale(d)
                })
                .interpolate('linear');  // 设置线的类型  cardinal平滑， linear:折线

            var level = Math.floor(i/per_level_count);
            var sub_main = main.append('g').attr('transform', "translate("+((i%per_level_count) * (per_width+grid_margin))+", "+(level*(per_height+grid_margin))+")").style('cursor', 'pointer');

            sub_main.on('click', function(d) {
                alert(d3.select(this).select('rect').attr('pass_id'));
            })
            /*
            sub_main.append('g')
                .attr('class', 'axis')
                .call(xaxis)
                .attr('style', 'font-size:11px')
                .attr('transform', "translate(0, "+per_height+")")
                .attr('text-anchor', 'start');

            sub_main.append('g')
                .attr('class', 'axis')
                .attr('style', 'font-size:11px')
                .call(yaxis);
            */
            /*填充背景色*/
            sub_main.append('rect').attr('width',per_width).attr('height',per_height)
                .attr('fill-opacity',1)
                .attr('stroke-width',1)
                .attr('stroke', '#000')
                .attr('fill', typeof(content.bg_colors[i]) != 'undefined' ? content.bg_colors[i] : colors[i%colors.length])
                .attr('pass_id', i);
            
            for (var j in content.data[i]) {
                sub_main.append('path')
                    .attr('d',line(content.data[i][j]))
                    .attr('fill', 'none')
                    .attr('stroke', '#000');
                

            }
            sub_main.append('text').text(typeof(content.words[i])!= 'undefined' && typeof(content.words[i][0]) != 'undefined' ? content.words[i][0] : '').attr('transform', 'translate(0, 15)').style('font-size', '12');
            sub_main.append('text').text(typeof(content.words[i])!= 'undefined' && typeof(content.words[i][1]) != 'undefined' ? content.words[i][1] : '').attr('transform', 'translate(0, '+(per_height-5)+')').style('font-size', 12);
        }

        d3.selectAll('.axis').attr('stroke-width', 0).attr('fill-opacity', 0);

    },
};

以上就是图的全部实现，如果有不清楚的地方可以留言，欢迎交流