向图表d3js

时间：2015-12-17 18:21:28

标签： javascript d3.js

我尝试在我的情节中添加多个数据集。我使用以下问题作为参考; Drawing Multiple Lines in D3.js。不幸的是，它似乎不适合我的情况，很可能我做错了但不幸的是我似乎没有找到我的失败。

代码的相关部分位于redraw函数中。在那里，我创建了两个数据集并将它们添加到系列中。之后，我尝试绘制参考文献中描述的系列。

希望有人可以帮助我： - ）

<!DOCTYPE html>
<html lang="en">
<head>
<title>MPERT</title>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
}
  
rect {
    fill: transparent;
}
  
.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
  
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
    clip-path: url(#clip);
}
  
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
  
.grid path {
    stroke-width: 0;
}

#slider-pertmin, #slider-pertmode, #slider-pertmax, #slider-pertshape {
	float: right;
	width: 120px;
	margin: 7px;
}

.ui-slider-horizontal {
	height: 8px;
	width: 200px;
}

.ui-slider .ui-slider-handle {
	height: 15px;
	width: 5px;
	padding-left: 5px;
}

#plot {
  background-color:#f9f9f9;
	border:solid 1px #ddd;
	padding:10px;
  width:250px;
}
	
#plotOptions {
	background-color:#f9f9f9;
	border:solid 1px #ddd;
	padding:10px;
}
	
.block label { 
	display: inline-block; 
	width: 60px; 
	text-align: right; 
}
</style>
<script type="text/javascript">
	// Log-gamma function
	gammaln = function gammaln(x)
	{
		var cof = [ 76.18009172947146,  -86.50532032941677,      24.01409824083091,
				    -1.231739572450155,   0.1208650973866179e-2, -0.5395239384953e-5];

		var j = 0;
		var ser = 1.000000000190015;
		var xx, y, tmp;

		tmp = (y = xx = x) + 5.5;
		tmp -= (xx + 0.5) * Math.log(tmp);

		for (; j < 6; j++)
			ser += cof[j] / ++y;

		return Math.log(2.5066282746310005 * ser / xx) - tmp;
	};
	
	// Gamma function
	gammafn = function gammafn(x) 
	{
		var p = [    -1.716185138865495,    24.76565080557592,   -379.80425647094563,
				    629.3311553128184,     866.9662027904133,  -31451.272968848367,
			     -36144.413418691176,    66456.14382024054];

		var q = [    -30.8402300119739,     315.35062697960416, -1015.1563674902192,
				   -3107.771671572311,    22538.118420980151,    4755.8462775278811,
				 -134659.9598649693,    -115132.2596755535];
	  
		var fact = false,
			n = 0,
			xden = 0,
			xnum = 0,
			y = x,
			i, 
			z, 
			yi, 
			res, 
			sum, 
			ysq;

		if (y <= 0) {
			res = y % 1 + 3.6e-16;
			
			if (res) {
				fact = (!(y & 1) ? 1 : -1) * Math.PI / Math.sin(Math.PI * res);
				y = 1 - y;
			} else
				return Infinity;
		}

		yi = y;

		if (y < 1)
			z = y++;
		else
			z = (y -= n = (y | 0) - 1) - 1;

		for (i = 0; i < 8; ++i) {
			xnum = (xnum + p[i]) * z;
			xden = xden * z + q[i];
		}

		res = xnum / xden + 1;

		if (yi < y)
			res /= yi;
		else if (yi > y) {
			for (i = 0; i < n; ++i) {
				res *= y;
				y++;
			}
		}

		if (fact)
			res = fact / res;

		return res;
	};

	// Beta function
	betafn = function betafn(x,y) 
	{
		// ensure arguments are positive
		if (x <= 0 || y <= 0)
			return undefined;

		// make sure x + y doesn't exceed the upper limit of usable values
		return (x + y > 170)
			? Math.exp(betaln(x, y))
			: gammafn(x) * gammafn(y) / gammafn(x + y);
	};
	
	// Natural logarithm of Beta function
	betaln = function betaln(x, y) 
	{
		return gammaln(x) + gammaln(y) - gammaln(x + y);
	};
	
	$(function() {
		$("#slider-pertmin").slider({
			range: "min",
			value: 1,
			min: 1,
			max: 20,
			step: 0.1,
			slide: function(event,ui) {
				if (ui.value > $("#slider-pertmode").slider("value")) {
					$("#pertmin").val($("#slider-pertmode").slider("value") - 0.1);
					$("#slider-pertmin").slider("value",$("#slider-pertmode").slider("value") - 0.1)
				} else
					$("#pertmin").val(ui.value);

				redraw();	
			},
			change: function(event,ui) {
			  $("#slider-pertmin").slider("value",$("#pertmin").val());
			}
		});

		$("#slider-pertmode").slider({
			range: "min",
			value: 3,
			min: 1,
			max: 20,
			step: 0.1,
			slide: function(event,ui) {
				if (ui.value < $("#slider-pertmin").slider("value")) {
					$("#pertmode").val($("#slider-pertmin").slider("value") + 0.1);
					$("#slider-pertmode").slider("value",$("#slider-pertmin").slider("value") + 0.1);
				} else if (ui.value > $("#slider-pertmax").slider("value")) {
					$("#pertmode").val($("#slider-pertmax").slider("value") - 0.1);
					$("#slider-pertmode").slider("value",$("#slider-pertmax").slider("value") - 0.1);
				} else
					$("#pertmode").val(ui.value);

				redraw();
			},
			change: function(event,ui) {
			  $("#slider-pertmode").slider("value",$("#pertmode").val());
			}
		});

		$("#slider-pertmax").slider({
			range: "min",
			value: 6,
			min: 1,
			max: 20,
			step: 0.1,
			slide: function(event,ui) {
				if (ui.value < $("#slider-pertmode").slider("value")) {
					$("#pertmax").val($("#slider-pertmode").slider("value") + 0.1);
					$("#slider-pertmax").slider("value",$("#slider-pertmode").slider("value") + 0.1);
				} else
					$("#pertmax").val(ui.value);

				redraw();
			},
			change: function(event,ui) {
        $("#slider-pertmax").slider("value",$("#pertmax").val());
			}
		});
		
		$("#slider-pertshape").slider({
			range: "min",
			value: 6,
			min: 1,
			max: 20,
			step: 0.1,
			slide: function(event,ui) {
				$("#pertshape").val($("#slider-pertshape").slider("value"));
			},
			change: function(event,ui) {
				$("#slider-pertshape").slider("value",$("#pertshape").val());
			}
		});

		$("#pertmin").val($("#slider-pertmin").slider("value"));
		$("#pertmode").val($("#slider-pertmode").slider("value"));
		$("#pertmax").val($("#slider-pertmax").slider("value"));
		$("#pertshape").val($("#slider-pertshape").slider("value"));
	});
</script>
</head>
<body>
<div id="plot"></div>
<div id="plotOptions" class="ui-widget" style="width:250px">
	<div class="block"> 
		<label for="pertmin">min:</label> <input type="value" id="pertmin" style="border:none; background: transparent; width:40px;" />
		<div class="ui-slider" id="slider-pertmin" />
	</div>
	<div class="block"> 
		<label for="pertmode">mode:</label> <input type="value" id="pertmode" style="border:none; background: transparent; width:40px;" />
		<div class="ui-slider" id="slider-pertmode" />
	</div>
	<div class="block">
		<label for="pertmax">max:</label> <input type="value" id="pertmax" style="border:none; background: transparent; width:40px;" />
		<div class="ui-slider" id="slider-pertmax" />
	</div>
	<div class="block">
		<label for="pertshape">shape:</label> <input type="value" id="pertshape" style="border:none; background: transparent; width:40px;" />
		<div class="ui-slider" id="slider-pertshape" />
	</div>
</div>
<script type="text/javascript">
	var pert = {
		min: 2,
		mode: 4,
		max: 9
	};

	var mpert = {
		shape: 0.5
	};

	var margin = {
        top: 20,
        right: 20,
        bottom: 35,
        left: 50
     },
		width = 250 - margin.left - margin.right,
		height = 250 - margin.top - margin.bottom;

    var x = d3.scale.linear()
		.domain([pert.min, pert.max])
		.range([0, width]);

    var y = d3.scale.linear()
		.domain([0, 1])
		.range([height, 0]);

    var xAxis1 = d3.svg.axis()
		.scale(x)
		.orient("bottom")
		.ticks(5)
		.innerTickSize(-6)
		.outerTickSize(0)
		.tickPadding(7);

    var yAxis1 = d3.svg.axis()
		.scale(y)
		.orient("left")
		.ticks(5)
		.innerTickSize(-6)
		.outerTickSize(0)
		.tickPadding(7);

    var xAxis2 = d3.svg.axis()
		.scale(x)
		.orient("top")
		.ticks(5)
		.innerTickSize(-6)
		.tickPadding(-20)
		.outerTickSize(0)
		.tickFormat("");

    var yAxis2 = d3.svg.axis()
		.scale(y)
		.orient("left")
		.ticks(5)
		.innerTickSize(6)
		.tickPadding(-20)
		.outerTickSize(0)
		.tickFormat("");

    var xGrid = d3.svg.axis()
		.scale(x)
		.orient("bottom")
		.tickSize(-height, -height, 0)
		.tickFormat("");

    var yGrid = d3.svg.axis()
		.scale(y)
		.orient("left")
		.ticks(5)
		.tickSize(-width, -width, 0)
		.tickFormat("");
	
	var color = d3.scale.category10();
	
    var line = d3.svg.line()
		.x(function(d,i) {
			return x(d.x);
		})
		.y(function(d) {
			return y(d.y);
		})
		.interpolate("linear");
	  
    var zoom = d3.behavior.zoom()
		.x(x)
		.y(y)
		.scaleExtent([1, 1])
		.on("zoom",redraw);
      
    var svg = d3.select("#plot").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
		.call(zoom);
	  
    // Add x grid
    svg.append("g")
		.attr("class", "x grid")
		.attr("transform", "translate(0," + height + ")")
		.call(xGrid);

    // Add y grid
    svg.append("g")
		.attr("class", "y grid")
		.call(yGrid);

    svg.append("g")
		.attr("class", "x1 axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis1);

    svg.append("g")
		.attr("class", "y1 axis")
		.call(yAxis1);

    /* append additional X axis */
    svg.append("g")
		.attr("class", "x2 axis")
		.attr("transform", "translate(" + [0, 0] + ")")
		.call(xAxis2);

    /* append additional y axis */
    svg.append("g")
		.attr("class", "y2 axis")
		.attr("transform", "translate(" + [width, 0] + ")")
		.call(yAxis2);

    // Add x axis label  
    svg.append("text")
        .attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom) + ")")
        .style("font-size","15")
        .style("text-anchor", "middle")
        .text("x axis");

    // Add y axis label
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y",0 - margin.left)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("font-size","15")
        .style("text-anchor", "middle")
        .text("y axis");

    svg.append("defs").append("clipPath")
		.attr("id", "clip")
		.append("rect")
		.attr("width", width)
		.attr("height", height);
      
    svg.append("rect")
		.attr("width", width)
		.attr("height", height);

    svg.append("path")
		.attr("class", "line")

    function redraw() {
		pert.min   = $("#slider-pertmin").slider("value");
		pert.mode  = $("#slider-pertmode").slider("value");
		pert.max   = $("#slider-pertmax").slider("value");
		pert.mu    = (pert.min + 4*pert.mode + pert.max)/6;
		pert.a1    = 6*(pert.mu - pert.min) / (pert.max - pert.min);
		pert.a2    = 6*(pert.max - pert.mu) / (pert.max - pert.min);
		pert.beta  = betafn(pert.a1,pert.a2);
		mpert.a1   = 1 + mpert.shape * (pert.mode - pert.min) / (pert.max - pert.min)
		mpert.a2   = 1 + mpert.shape * (pert.max - pert.mode) / (pert.max - pert.min)
		mpert.beta = betafn(mpert.a1,mpert.a2);
		
		x.domain([pert.min, pert.max]);
	
		svg.select(".x1.axis").call(xAxis1);
		svg.select(".y1.axis").call(yAxis1);
		svg.select(".x2.axis").call(xAxis2);
		svg.select(".y2.axis").call(yAxis2);
		svg.select(".x.grid").call(xGrid);
		svg.select(".y.grid").call(yGrid);
		
		var data1 = [];
		var data2 = [];
		var series = [];
		
		for (var k = pert.min; k < pert.max; k += 0.1) {
			data1.push({ 
				x: k,
				y: (1/pert.beta)*(Math.pow(k - pert.min,pert.a1 - 1) * 
								  Math.pow(pert.max - k,pert.a2 - 1)) /
								  Math.pow(pert.max - pert.min,pert.a1 + pert.a2 - 1)
			})

			data2.push({
				x: k,
				y: (1/mpert.beta)*(Math.pow(k - pert.min,mpert.a1 - 1) * 
								   Math.pow(pert.max - k,mpert.a2 - 1)) /
								   Math.pow(pert.max - pert.min,mpert.a1 + mpert.a2 - 1)
			});
		}

		series.push(data1);
		series.push(data2);

		d3.selectAll(".line")
			.data(series)
			.enter().append("path")
			.attr("class", "line")
			.attr("d", line);
	}

	$(function() {
		redraw();
	});
</script>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题