magicshui · December 13, 2012 03:06
diff --git a/trends.js b/trends.js
 // 展示一个趋势图
 // width : 宽度
 // height: 高度
 // countweek: url接口地址 ，
 // #trends ： dom selector
 // 数据格式（返回的是当前登录用户的数据）：
 /*
 [
    {
        "date": "2011 02",
        "price": "68"
    },
    {
        "date": "2011 02",
        "price": "46"
    }
 ]
 */
 //
 // 调用方法：show_trends(900,400,"countweek", "#trends");
 function show_trends2(width,height,url,select){   
    var m = [30, 30, 30, 30],
    w = width - m[1] - m[3],
    h = height- m[0] - m[2],
    parse = d3.time.format("%Y %m").parse;

 // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
 var x = d3.time.scale().range([0, w]),
    y = d3.scale.linear().range([h, 0]),
    xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

 // An area generator, for the light fill.
 var area = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(h)
    .y1(function(d) { return y(d.price); });

 // A line generator, for the dark stroke.
 var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

 d3.json(url, function(data) {

  // Filter to one symbol; the S&P 500.
  //var values = data.filter(function(d) {
  // return d.symbol == "S&P 500";
  //});
  var values=data;

  // Parse dates and numbers. We assume values are sorted by date.
  values.forEach(function(d) {
    d.date = parse(d.date);
    d.price = +d.price;
  });

  // Compute the minimum and maximum date, and the maximum price.
  x.domain([values[0].date, values[values.length - 1].date]);
  y.domain([0, d3.max(values, function(d) { return d.price; })]).nice();

  // Add an SVG element with the desired dimensions and margin.
  var svg = d3.select(select).append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
    .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

  // Add the clip path.
  svg.append("svg:clipPath")
      .attr("id", "clip")
    .append("svg:rect")
      .attr("width", w)
      .attr("height", h);

  // Add the area path.
  svg.append("svg:path")
      .attr("class", "area")
      .attr("clip-path", "url(#clip)")
      .attr("d", area(values));



  // Add the y-axis.
  svg.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + w + ",0)")
      .call(yAxis);

  // Add the line path.
  svg.append("svg:path")
      .attr("class", "line")
      .attr("clip-path", "url(#clip)")
      .attr("d", line(values));

 svg.on("click", function() {
    var n = values.length - 1,
        i = Math.floor(Math.random() * n / 2),
        j = i + Math.floor(Math.random() * n / 2) + 1;
    x.domain([values[i].date, values[j].date]);
    var t = svg.transition().duration(750);
    t.select(".x.axis").call(xAxis);
    t.select(".area").attr("d", area(values));
    t.select(".line").attr("d", line(values));
  });

  
 });
 };
	// 展示一个趋势图
	// width : 宽度
	// height: 高度
	// countweek: url接口地址，
	// #trends ： dom selector
	// 数据格式（返回的是当前登录用户的数据）：
	/*
	[
	{
	"date": "2011 02",
	"price": "68"
	},
	{
	"date": "2011 02",
	"price": "46"
	}
	]
	*/
	//
	// 调用方法：show_trends(900,400,"countweek", "#trends");
	function show_trends2(width,height,url,select){
	var m = [30, 30, 30, 30],
	w = width - m[1] - m[3],
	h = height- m[0] - m[2],
	parse = d3.time.format("%Y %m").parse;

	// Scales and axes. Note the inverted domain for the y-scale: bigger is up!
	var x = d3.time.scale().range([0, w]),
	y = d3.scale.linear().range([h, 0]),
	xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
	yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

	// An area generator, for the light fill.
	var area = d3.svg.area()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y0(h)
	.y1(function(d) { return y(d.price); });

	// A line generator, for the dark stroke.
	var line = d3.svg.line()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.price); });

	d3.json(url, function(data) {

	// Filter to one symbol; the S&P 500.
	//var values = data.filter(function(d) {
	// return d.symbol == "S&P 500";
	//});
	var values=data;

	// Parse dates and numbers. We assume values are sorted by date.
	values.forEach(function(d) {
	d.date = parse(d.date);
	d.price = +d.price;
	});

	// Compute the minimum and maximum date, and the maximum price.
	x.domain([values[0].date, values[values.length - 1].date]);
	y.domain([0, d3.max(values, function(d) { return d.price; })]).nice();

	// Add an SVG element with the desired dimensions and margin.
	var svg = d3.select(select).append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	// Add the clip path.
	svg.append("svg:clipPath")
	.attr("id", "clip")
	.append("svg:rect")
	.attr("width", w)
	.attr("height", h);

	// Add the area path.
	svg.append("svg:path")
	.attr("class", "area")
	.attr("clip-path", "url(#clip)")
	.attr("d", area(values));



	// Add the y-axis.
	svg.append("svg:g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + w + ",0)")
	.call(yAxis);

	// Add the line path.
	svg.append("svg:path")
	.attr("class", "line")
	.attr("clip-path", "url(#clip)")
	.attr("d", line(values));

	svg.on("click", function() {
	var n = values.length - 1,
	i = Math.floor(Math.random() * n / 2),
	j = i + Math.floor(Math.random() * n / 2) + 1;
	x.domain([values[i].date, values[j].date]);
	var t = svg.transition().duration(750);
	t.select(".x.axis").call(xAxis);
	t.select(".area").attr("d", area(values));
	t.select(".line").attr("d", line(values));
	});


	});
	};