d3----line_color_gradient 学习记录

d3实现二维曲线颜色渐变，高斯算法的曲线，彩色是前7条线合成效果。
效果截图：

代码实现：

<

script type="text/javascript">

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 500 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


var x = d3.scale.linear()
    .range([0, width])
    .domain([-10, 10]);

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

var svg = d3.select("body").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 + ")");

    svg.on('contextmenu', function(data, index) {
      if (d3.event.pageX || d3.event.pageY) {
          var x = d3.event.pageX;
          var y = d3.event.pageY;
      } else if (d3.event.clientX || d3.event.clientY) {
          var x = d3.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
          var y = d3.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }

      d3.select('#action_div')
        .style('position', 'absolute')
        .style('left', x + 'px')
        .style('top', y + 'px')
        .style('display', 'block');

      d3.event.preventDefault();
  })

/d3.tsv("data.tsv", function(error, data2) {//excel打开.tsv文件

  var data = new Array();
  data[0] = gaussian(0.584542144,3.000837279,0.695708794);
  data[1] = gaussian(0.584542144,3.000837279,0.695708794);
  data[2] = gaussian(0.312024052,-3.024075067,0.597481057);
  data[3] = gaussian(0.369684397,2.007799182,0.77623234);
  data[4] = gaussian(0.078860455,0.000666388,0.560802636);
  data[5] = gaussian(0.396895767,1.024743113,0.627726103);
  data[6] = gaussian(0.620582259,1.007756722,0.308801211);
  data[7] = gaussian(0.435481848,0.500768716,0.993654477);

  var g8 = [];
 for(var i=0;i