TypeScript d3.line函數代碼示例

export function* axes(xtitle, ytitle, changeLimits) {

  let margin = { top: 20, right: 25, bottom: 30, left: 50 },
    width = 480 - margin.left - margin.right,
    height = 180 - margin.top - margin.bottom;

  let 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 + ")");
  
  let colors = d3.scaleOrdinal(d3.schemeCategory10);
  let x = d3.scaleLinear().range([0, width]);
  let y = d3.scaleLinear().range([height, 0]);
  let x_axis = d3.axisBottom(x);
  let y_axis = d3.axisLeft(y);
  let x_node = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
  let y_node = svg.append("g")
    .attr("class", "y axis");

  x_node.append("text")
    .attr("transform", "translate(" + width + ", 0)")
    .text(xtitle);
  y_node.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(ytitle);

  let l = d3.line()
    .x(function (d, n) { return x(n) })
    .y(function (d) { return y(d) });
  let p = svg.append("path")
    .attr("class", "line")
    .attr("stroke", colors("1"));

  let first = true;
  while (true) {
    let data = yield svg;
    let ymin = Math.min(...data);
    let ymax = Math.max(...data);
    if (changeLimits || first) {
      first = false;
      x.domain([0, data.length]);
      y.domain([ymin, ymax]);
    }
    // update axes
    x_node.call(x_axis);
    y_node.call(y_axis);

    p.datum(data)
      .attr("d", l);
  }
}

function plotLines(data) {
  const el = outputEl();
  // Don't try to plot if there's not output registered.
  if (!el) return;
  const outputId_ = "#" + el.id;

  // Make an SVG Container
  let width = 440;
  let height = 300;

  // No append.
  d3.select(outputId_).select("svg").remove();

  const svg = d3.select(outputId_).append("svg")
    .attr("viewBox", `0 0 ${width} ${height}`)
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("width", width)
    .attr("height", height);
  const m = 30;
  const margin = { top: m, right: m, bottom: m, left: m };
  width = +svg.attr("width") - margin.left - margin.right;
  height = +svg.attr("height") - margin.top - margin.bottom;
  const g = svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  const [xMin, xMax, yMin, yMax] = getLimits(data);

  // A small inner margin prevents the plot lines from touching the axes.
  const xMargin = (xMax - xMin) * 0.02;
  const yMargin = (yMax - yMin) * 0.02;

  const xScale = d3.scaleLinear()
    .domain([xMin - xMargin, xMax + xMargin])
    .range([0, width]);

  const yScale = d3.scaleLinear()
    .domain([yMin - yMargin, yMax + yMargin])
    .range([height, 0]);

  makeAxis(svg, margin, xScale, yScale, width, height);

  const line = (d3.line() as any)
    .x(d => xScale(d.x))
    .y(d => yScale(d.y));

  g.selectAll("path").data(data)
    .enter()
    .append("path")
    .attr("d", line as any)
    .style("fill", "none")
    .style("stroke-width", "2px")
    .style("stroke", (d, i) => {
      return color(i as any);
    });
}

    public render(): void {
        let propertyX = this.config.get('propertyX');
        let propertyY = this.config.get('propertyY');
        let curve: CurveFactory = this.config.get('curve');
        this.linesContainer = this.svg.append('g')
            .attr('class', 'lineSet');

        this.lineGenerator = line()
            .curve(curve)
            .x((d) => this.x.xAxis.scale()(d[propertyX]))
            .y((d) => this.y.yAxis.scale()(d[propertyY]));
    }

  constructor(rootElt: AnySvgSelection, bounds: ChartBounds) {
    this.bounds = bounds;

    this.xScale = d3.scaleTime().range(
      [bounds.axisSize + bounds.margin,
       bounds.width - bounds.margin]);
    this.yScale = d3.scaleLinear().range(
      [bounds.height - bounds.axisSize - bounds.margin,
       bounds.margin]);

    this.yAxis = d3.axisLeft<number>(this.yScale)
      .ticks(3);
    this.xAxis = d3.axisBottom<Date>(this.xScale)
      .ticks(d3.timeDay.every(1))
      .tickFormat(d3.timeFormat("%b %d"));

    this.lineSpec = d3.line<DataPoint>()
      .x((d: DataPoint) => this.xScale(new Date(d.unix_seconds * 1000)))
      .y((d: DataPoint) => this.yScale(d.temperature));

    this.rootElt = rootElt;

    this.precipBar = new IntensityBand<DataPoint>(
      (d: DataPoint) => d.precipitation_chance,
      intensity.blue,
      {
        width: this.bounds.width - this.bounds.axisSize - 2 * this.bounds.margin,
        height: 3,
        xPos: this.bounds.axisSize + this.bounds.margin,
        yPos: this.bounds.height - this.bounds.axisSize - this.bounds.margin,
      },
      this.rootElt,
      "precipBar");

    this.cloudsBar = new IntensityBand<DataPoint>(
      (d: DataPoint) => d.clouds,
      intensity.gray,
      {
        width: this.bounds.width - this.bounds.axisSize - 2 * this.bounds.margin,
        height: 3,
        xPos: this.bounds.axisSize + this.bounds.margin,
        yPos: this.bounds.height - this.bounds.axisSize - this.bounds.margin + 3,
      },
      this.rootElt,
      "cloudsBar");

}

    var draw = function () {
        var svg = d3.select("body").append("svg").attr("width", 100).attr("height", 100).append('g').attr('transform', 'scale(4,4)');

        svg.append('svg:defs').append('svg:marker')
            .attr('id', 'end-arrow')
            .attr('viewBox', '0 -5 10 10')
            .attr('refX', 8)
            .attr('markerWidth', 3)
            .attr('markerHeight', 3)
            .attr('orient', 'auto')
          .append('svg:path')
            .attr('d', 'M0,-5L10,0L0,5L2,0')
            .attr('stroke-width', '0px')
            .attr('fill', '#000');
        var color = d3.schemeCategory10;
        // draw segments
        var getPoints = function (segs) {
            return [segs[0][0]].concat(segs.map(function (s) { return s[1] }));
        }
        var lineFunction = d3.line()
            .curve(d3.curveLinear)
            .x(function (d:any) { return d.x; })
            .y(function (d:any) { return d.y; });
        var edgepaths = svg.selectAll(".edge").data(routes).enter()
            .append('path').attr('class', 'edge').attr('opacity', 0.5)
            .attr('d', function (d) { return lineFunction(getPoints(d)) })
            .attr('stroke', function (d, i) { return color[i] })
            .attr('fill', 'none')
            .style('marker-end', 'url(#end-arrow)');
        svg.selectAll('.node').data(verts).enter()
            .append('ellipse').attr('rx', 1).attr('ry', 1).attr('opacity', 0.5)
            .attr('cx', function (d:any) { return d.x }).attr('cy', function (d:any) { return d.y })
        // draw from edge paths
        //var edgepaths = svg.selectAll(".edge").data(edges).enter()
        //    .append('path').attr('class', 'edge').attr('opacity', 0.5)
        //    .attr('d', function (d) { return lineFunction(d) })
        //    .attr('stroke', function (d) { return color(d.id) })
        //    .attr('fill', 'none')
    }

  plot() {
    var data: Array<ExpectedData> = [
      { key: 39, value: 60, date: "2014/01/01" },
      { key: 40, value: 58, date: "2014/01/02" },
      { key: 38, value: 59, date: "2014/01/03" },
      { key: 41, value: 56, date: "2014/01/04" },
      { key: 43, value: 57, date: "2014/01/05" },
      { key: 40, value: 55, date: "2014/01/06" },
      { key: 42, value: 56, date: "2014/01/07" },
      { key: 41, value: 52, date: "2014/01/08" },
      { key: 39, value: 54, date: "2014/01/09" },
      { key: 36, value: 57, date: "2014/01/10" },
      { key: 37, value: 56, date: "2014/01/11" },
      { key: 41, value: 59, date: "2014/01/12" },
      { key: 43, value: 56, date: "2014/01/13" },
      { key: 42, value: 52, date: "2014/01/14" },
      { key: 43, value: 48, date: "2014/01/15" },
      { key: 40, value: 47, date: "2014/01/16" },
      { key: 42, value: 48, date: "2014/01/17" },
      { key: 44, value: 45, date: "2014/01/18" },
      { key: 46, value: 43, date: "2014/01/19" },
      { key: 48, value: 41, date: "2014/01/20" },
      { key: 53, value: 36, date: "2014/01/21" },
      { key: 52, value: 34, date: "2014/01/22" },
      { key: 53, value: 32, date: "2014/01/23" },
      { key: 55, value: 34, date: "2014/01/24" },
      { key: 56, value: 32, date: "2014/01/25" },
      { key: 55, value: 30, date: "2014/01/26" },
      { key: 57, value: 28, date: "2014/01/27" },
      { key: 56, value: 26, date: "2014/01/28" },
      { key: 59, value: 24, date: "2014/01/29" },
      { key: 58, value: 22, date: "2014/01/30" },
      { key: 60, value: 20, date: "2014/01/31" }
    ];
    var w = window.screen.width;
    var h = 450;
    var margin = {
      top: 10,
      bottom: 100,
      left: 50,
      right: 50
    };
    var width = w - margin.left - margin.right;
    var height = h - margin.top - margin.bottom;

    this.svg = d3.select(".container-fluid").append("svg")
      .attr("id", "chart")
      .attr("width", w)
      .attr("height", h)
      .style("background", "#F5F5DC")
      .style('text-align', "center");
    this.chart = this.svg.append("g")
      .classed("display", true)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .style("background", "green");
    var dateParser = d3.timeParse("%Y/%m/%d");

    // Define the div for the tooltip
    var div = d3.select("body").append("div")
      .attr("class", "tooltip").style("margin","0px").style("padding","2px")
      .style("position","absolute").style("height","30px").style("border-radius","8px")
      .style("background", "lightsteelblue").style("font","12px sans-serif").style("width","60px")
      .style("opacity", 0);


    var x = d3.scaleTime()
      .domain(d3.extent(data, function (d) {
        var date = dateParser(d.date);

        return date;
      }))
      .range([0, width]);


    var y = d3.scaleLinear()
      .domain([0, d3.max(data, function (d) {
        return d.value;
      })])
      .range([height, 0]);


    var y1 = d3.scaleLinear()
      .domain([0, d3.max(data, function (d) {
        return d.key;
      })])
      .range([height, 0]);

    var area = d3.area<ExpectedData>()
      .x(function (d) {

        return x(dateParser(d.date));
      })
      .y0(height)
      .y1(function (d) {
        return y(d['value']);
      });

    //line1 for value in data
    var line = d3.line<ExpectedData>()
      .x(function (d) {
//.........這裏部分代碼省略.........

  ngOnInit() {
    // 2. Use the margin convention practice 
var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right // Use the window's width 
, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 21;

// 5. X scale will use the index of our data
var xScale = d3.scaleLinear()
  .domain([0, n-1]) // input
  .range([0, width]); // output

// 6. Y scale will use the randomly generate number 
var yScale = d3.scaleLinear()
  .domain([0, 1]) // input 
  .range([height, 0]); // output 

// 7. d3's line generator
var line = d3.line()
  .x(function(d, i) { return xScale(i); }) // set the x values for the line generator
  .y(function(d) { 
    console.log("dy", d['y'])
    return yScale(d['y']); }) // set the y values for the line generator 
  .curve(d3.curveMonotoneX) // apply smoothing to the line

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

// 1. Add the SVG to the page and employ #2
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 + ")");

// 3. Call the x axis in a group tag
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

// 4. Call the y axis in a group tag
svg.append("g")
  .attr("class", "y axis")
  .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator 
svg.append("path")
  .datum(dataset) // 10. Binds data to the line 
  .attr("class", "line") // Assign a class for styling 
 // .attr("d", line); // 11. Calls the line generator 

// 12. Appends a circle for each datapoint 
svg.selectAll(".dot")
  .data(dataset)
.enter().append("circle") // Uses the enter().append() method
  .attr("class", "dot") // Assign a class for styling
  .attr("cx", function(d, i) { return xScale(i) })
  .attr("cy", function(d) { return yScale(d.y) })
  .attr("r", 5);
  }

    constructor(parallelCoordinates: ParallelCoordinates) {
        super();
        this.parallelCoordinates = parallelCoordinates;

        this.lineGenerator = line();
    }