TypeScript svg.line方法代码示例

    private draw(): void {
        var xMin = d3.min(this._points, p => p[0]);
        var xMax = d3.max(this._points, p => p[0]);
        var yMin = d3.min(this._points, p => p[1]);
        var yMax = d3.max(this._points, p => p[1]);

        var lineGenerator = d3.svg.line()
            .x(d => this._scale(d[0]))
            .y(d => this._scale(d[1]));
        var path = this._group
            .append('path')
            .attr('d', lineGenerator(this._points))
            .attr({
                fill: this._color
            });
        this._group
            .append('text')
            .attr({
                'transform': `translate(${this._scale((xMax + xMin) / 2)},${this._scale((yMax + yMin) / 2)})`
            })
            .style({
                'text-transform': 'uppercase',
                'text-anchor': 'middle'
            })
            .text(this._name);
    }

    public render(data: ICoordinate[]): d3.Selection<any> {
        const x = d3.scale.linear().range([0, this.width]);
        const y = d3.scale.linear().range([this.height, 0]);
        const xAxis = d3.svg.axis().scale(x).orient('bottom');
        const yAxis = d3.svg.axis().scale(y).orient('left');
        const svg = this.element.append('svg')
            .attr('width', this.chartWidth)
            .attr('height', this.chartHeight)
            .append('g')
            .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        x.domain(d3.extent(data, a => a.x));
        y.domain(d3.extent(data, a => a.y));

        const line = d3.svg.line<ICoordinate>()
            .x(a => x(a.x))
            .y(a => y(a.y));

        svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0,' + this.height + ')')
            .call(xAxis);

        svg.append('g')
            .attr('class', 'y axis')
            .call(yAxis);

        svg.append('path')
            .datum(data)
            .attr('class', 'line')
            .attr('d', line);

        return svg;
    }

function GenerateGraph(data_row, iter:number) {
    // define dimensions of graph
    let margins:number[] = [80, 80, 80, 80];
    let width:number = 1000 - margins[1] - margins[3];
    let height:number = 400 - margins[0] - margins[2];

    // create a simple data array that we'll plot with a line (this array
    // represents only the Y values, X will just be the index location)
    // X scale will fit all values from data[] within pixels 0-w
    let x = d3.scale.linear().domain([1977, 2014]).range([0, height]);
    // Y scale will fit values from 0-10 within pixels h-0 (Note the inverted
    // domain for the y-scale: bigger is up!)
    let y = d3.scale.linear().domain([0, 10]).range([height, 0]);
    // automatically determining max range can work something like this
    // let y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
    // create a line function that can convert data[] into x and y points
    let line = d3.svg.line()
        .x(function(d) { return d[0]; })
        .y(function(d) { return d[1]; })
        .interpolate("basis");
    // Add an SVG element with the desired dimensions and margin.
    let div_element = "#graph_" + iter;
    let graph = d3.select(div_element).append("svg:svg")
          .attr("width", width + margins[1] + margins[3])
          .attr("height", height + margins[0] + margins[2])
        .append("svg:g")
          .attr("transform", "translate(" + margins[3] + "," + margins[0] + ")");
    // create yAxis
    let xAxis = d3.svg.axis().scale(x).tickSize(-height); //.tickSubdivide(true);
    // Add the x-axis.
    graph.append("svg:g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
    // create left yAxis
    let yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
    // Add the y-axis to the left
    graph.append("svg:g")
          .attr("class", "y axis")
          .attr("transform", "translate(-25,0)")
          .call(yAxisLeft);

    // Add the line by appending an svg:path element with the data line
    // we created above do this AFTER the axes above so that the line is
    // above the tick-lines

    graph.append("svg:path").attr("d", line(data_row));
}

export const plotCurve = ({element,data,color,valueScale,dateScale}:CurvePlotConfig) => {
        
    const pathGenerator = d3.svg.line().interpolate('linear');
    
    const pathMapper = () => {
        const coOrdinatesArray = data.map(datum => {
            const coOrdinates:[number,number]=[0,0];
            coOrdinates[0] = dateScale(datum.date);
            coOrdinates[1] = valueScale(datum.value);
            return coOrdinates;
        });
        return pathGenerator(coOrdinatesArray);
    };
    
    element.append('path')
        .attr('stroke',color)
        .attr('fill','none')
        .attr('d',pathMapper);
    
};

function GenerateGraph(title:string, data_row, iter:number) {
    // define dimensions of graph
    let margins:number[] = [80, 80, 80, 80];
    let width:number = 1000 - margins[1] - margins[3];
    let height:number = 400 - margins[0] - margins[2];

    // Scale functions for x and y values
    let x = d3.scale.linear().domain([0, 10]).range([0, height]);

    let y_max:any = _.max(data_row);
    if (y_max < 30) {
        y_max = 30;
    }
    let y = d3.scale.linear().domain([0, y_max]).range([height, 0]);

    // automatically determining max range can work something like this
    // let y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
    // create a line function that can convert data[] into x and y points
    let line = d3.svg.line()
        .x(function(d) { return x(d[0]); })
        .y(function(d) { return y(d[1]); });

    // Add an SVG element with the desired dimensions and margin.
    let div_element = "#graph_" + iter;
    let graph = d3.select(div_element).append("svg:svg")
          .attr("width", width + margins[1] + margins[3])
          .attr("height", height + margins[0] + margins[2])
        .append("svg:g")
          .attr("transform", "translate(" + margins[3] + "," + margins[0] + ")");

    // create x axis
    let xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(-height)
    .tickValues([1977, 1982, 1987, 1992, 1997, 2002, 2007, 2012]);

    // Add the x-axis.
    graph.append("svg:g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

    // create left y axis
    let yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");

    // Add the y-axis to the left
    graph.append("svg:g")
          .attr("class", "y axis")
          .attr("transform", "translate(-25,0)")
          .call(yAxisLeft);

    // resort data_row
    let data_row_temp = [];
    for (let i = 0; i < data_row.length; i++) {
      data_row_temp.push([i+1, data_row[i]]);
    }
    data_row = data_row_temp;

    // Add the line by appending an svg:path element with the data line
    // we created above do this AFTER the axes above so that the line is
    // above the tick-lines
    graph.append("svg:path").data(data_row).attr("d", line(data_row));

    // Add the jurisdiciton
    graph.append("svg:text")
    .attr("x", (width / 2))
    .attr("y", 0 - (margins[1] / 2))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text(title);
    console.log(title)
}

  ngOnInit() {
    let data: Array<QpsChartData> = this.data;
    let t = data[0].time.getTime();


    let el:any = this.elementRef.nativeElement;
    let parentWidth = el.parentElement.offsetWidth;
    let parentHeight = 250;
    let margin = { top: 20, right: 40, bottom: 20, left: 40 };
    let width = parentWidth - margin.left - margin.right;
    let height = parentHeight - margin.top - margin.bottom;

    let x = d3.time.scale()
        .domain([t, data[data.length-1].time.getTime()])
        .range([0, width]);

    let y = d3.scale.linear()
        .domain([0, d3.max(data, d => d.value)])
        .range([height, 0]);

    let xAxis = d3.svg.axis()
        .scale(x)
        .ticks(5)
        .tickFormat(d3.time.format('%H:%M'))
        .orient("bottom");

    let yAxis = d3.svg.axis()
        .scale(y)
        .ticks(4)
        .orient("left");

    let line = d3.svg.line<QpsChartData>()
        .x((d: QpsChartData) => x(new Date(d.time.getTime())))
        .y((d: QpsChartData) => y(d.value))
        .interpolate("linear");

    let svg = d3.select(el).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.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)

    svg.selectAll('.axis line, .axis path')
         .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '2px'});

    let path = svg.append("g")
        .append("path")
        .datum(data)
        .attr("d", line)
        .attr("stroke", "red")
        .attr("stroke-width", 1)
        .attr("fill", "none");

    let avPath = svg.append("g")
        .append("path")
        .datum([data[0], data[data.length-1]])
        .attr("d", line)
        .attr("stroke", "#D8D2D2")
        .attr("stroke-width", 1)
        .attr("fill", "none");
  }

    ngOnInit() {
        const d3options = {
            w: 500, h: 120, padding: 2, dataset: [5, 10, 15, 20, 5, 10, 4, 6, 13, 5, 25, 3]
        };

        const svg = d3.select('try-d3')
            .append('svg')
            .attr('width', d3options.w)
            .attr('height', d3options.h);

        function colorPicker(v: number) {
            if (v < 20) return '#666';
            else return '#FF0033'
        }

        svg.selectAll('rect')
            .data(d3options.dataset)
            .enter()
            .append('rect')
            .attr({
                x: (d, i) => i * (d3options.w / d3options.dataset.length),
                y: d => d3options.h - d * 4,
                width: d3options.w / d3options.dataset.length - d3options.padding,
                height: d => d * 4,
                fill: d => colorPicker(d)
            });

        svg.selectAll('text')
            .data(d3options.dataset)
            .enter()
            .append('text')
            .text(d => d)
            .attr({
                'text-anchor': 'middle',
                x: (d, i) =>
                    i * (d3options.w / d3options.dataset.length) +
                    (d3options.w / d3options.dataset.length - d3options.padding) / 2,
                y: d => d3options.h - d * 4 + 14,
                'font-family': 'sans-serif',
                'font-size': 12,
                'fill': '#fff'
            });

        const lineData = [{ "age": 10, "name": 32 }, { "age": 20, "name": 26 }, { "age": 30, "name": 28 }, { "age": 40, "name": 30 }, { "age": 50, "name": 28 }, { "age": 60, "name": 32 }, { "age": 70, "name": 40 }];
        const lineFun: any = d3.svg.line()
            .x((d: any) => d.age * 5)
            .y((d: any) =>d3options.h -  d.name * 2)
            .interpolate('basis');

        const linechart = d3.select('try-d3')
            .append('svg')
            .attr('width', d3options.w)
            .attr('height', d3options.h);

        const viz = linechart.append('path')
            .attr({
                d: lineFun(lineData),
                'stroke-width': 2,
                'stroke': 'purple',
                'fill': 'none'
            });
    }