TypeScript svg.axis方法代码示例

    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;
    }

	ngOnInit() {
		const data = [
			{name: "First", value: 4}, 
			{name: "Second", value: 8}, 
			{name: "Third", value: 15}, 
			{name: "Fourth", value: 16}, 
			{name: "Fifth", value: 23}, 
			{name: "Sixth", value: 42}];

		const margin = {top: 20, right: 30, bottom: 30, left: 40},
			width = 960 - margin.left - margin.right,
			height = 500 - margin.top - margin.bottom;

		const x = d3.scale.ordinal()
			.domain(data.map(function(d) { return d.name; }))
			.rangeRoundBands([0, width], .1);

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

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

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

		const chart = d3.select(".chart")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
		.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		chart.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(xAxis);

		chart.append("g")
			.attr("class", "y axis")
			.call(yAxis)
			.append("text")
			.attr("transform", "rotate(-90)")
			.attr("y", 6)
			.attr("dy", ".71em")
			.style("text-anchor", "end")
			.text("Frequency");

		chart.selectAll(".bar")
			.data(data)
			.enter().append("rect")
			.attr("class", "bar")
			.attr("x", function(d) { return x(d.name); })
			.attr("y", function(d) { return y(d.value); })
			.attr("height", function(d) { return height - y(d.value); })
			.attr("width", x.rangeBand());
	}

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 plotValueAxis = ({element,valueScale,ticks}:ValueAxisPlotConfig) => {
    const valueAxis = d3.svg.axis()
        .scale(valueScale)
        .orient('right')
        .ticks(ticks);
    valueAxis(element);
};

  createChart() {
    let container = document.getElementsByClassName("chart")[0];
    let margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = container.clientWidth - margin.left - margin.right,
    height = 384 - margin.top - margin.bottom;

    let x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

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

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

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

    let svg = d3.select("div.chart").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 + ")");

    x.domain(this.optimalAllocs.map(function(d) { return d.name; }));
    y.domain([0, d3.max(this.optimalAllocs, function(d) { return d.value; })]);

    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(".bar")
        .data(this.optimalAllocs)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.name); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); });
  }

export const plotDateAxis = ({element,dateScale}:DateAxisPlotConfig) => {
    const dateAxis =  d3.svg.axis()
        .scale(dateScale)
        .tickValues(dateScale.domain().filter((_,index,array) => !(index%5) || index == array.length-1))
        .tickFormat(dateString => moment(dateString).format('M/D'));
    dateAxis(element);
    
};

    init() {
        const {target, width, height, margin} = this;
        // const {xTicks, yTicks, yRange} = this;
        const {xTicks, yRange} = this;
        const [w, h] = this.dimensions();

        this.chart = d3.select(target)
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`);

        this.x = d3.time.scale()
            .range([0, w]);

        this.y = d3.scale.linear()
            .range(yRange);

        this.xAxis = d3.svg.axis()
            .orient('bottom')
            .scale(this.x)
            .ticks(xTicks)
            .tickPadding(8)
            .tickSize(-h);

        this.chart.append('g')
            .attr('class', 'x axis')
            .attr('transform', `translate(0, ${h})`)
            .call(this.xAxis);


        his.details = this.chart.append('g')
            .attr('class', 'details')
            .style('display', 'none')

        this.details.append('line')
            .attr('class', 'x')
            .attr('y1', 0)
            .attr('y1', h)

        this.details.append('text')
            .attr('class', 'time')

        this.details.append('g')
            .attr('class', 'data')

        this.overlay = this.chart.append('rect')
            .attr('class', 'overlay')
            .attr('width', w)
            .attr('height', h)
            .style('fill-opacity', 0)
            .on('mousemove', _ => this.onMouseOver())
            .on('mouseleave', _ => this.onMouseLeave());

        this.xBisect = d3.bisector(d => d.time).left;


    }

  init() {
    /************************************************************
     * Set Axis and Colors
     ***********************************************************/

    //this.color = d3.scale.ordinal();
    this.color = d3.scale.ordinal<string, string>().range(['#000033', '#003462', '#006699', '#0099cc', '#666666', '#999999', '#cccccc', '#db9815', '#999900', '#d1d17c', '#669933', '#666633', '#333333']);

    this.xScale = d3.scale.ordinal<string, number>()
      .range([0, 0]);

    this.yScale = d3.scale.linear()
      // Default domain
      .domain([0, 100])
      .range([0, 0]);

    this.xAxis = d3.svg.axis()
      .scale(this.xScale)
      .orient('bottom');

    this.yAxis = d3.svg.axis()
      .scale(this.yScale)
      .orient('left')
      .ticks(6);


    /************************************************************
     * Add Elements
     ***********************************************************/
    this.xAxisElement = this.chart
      .append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,0)')
      .call(this.xAxis);

    this.yAxisElement = this.chart
      .append('g')
      .attr('class', 'y axis')
      .call(this.yAxis);

    this.barElement = this.chart
      .append('g')
      .attr('class', 'bars');
  }

  ngOnInit() {
    let data:Array<ClientChartData> = this.data;
    let el:any = this.elementRef.nativeElement;
    let parentWidth = el.parentElement.offsetWidth;
    let parentHeight = 250;
    let margin = { top: 20, right: 40, bottom: 50, left: 40 };
    let width = parentWidth - margin.left - margin.right;
    let height = parentHeight - margin.top - margin.bottom;

    let x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1)
        .domain(data.map((d: ClientChartData) => d.client));

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

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

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

    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)
      .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(45)")
        .style("text-anchor", "start");

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Hits");

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

    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", (d: ClientChartData) => x(d.client))
        .attr("width", x.rangeBand())
        .attr("y", (d: ClientChartData) => y(d.hits))
        .attr("height", (d: ClientChartData) => height - y(d.hits));

    svg.selectAll('.bar')
          .style({'fill': '#337ab7'});
  }

    ngOnInit(){     
       
        var el = this.elementRef.nativeElement;
        var attrName = el.children && el.children[0] && el.children[0].attributes && el.children[0].attributes[0] && el.children[0].attributes[0].name;
       
        var componentContainer = d3.select(this.elementRef.nativeElement);
        var d3Container = componentContainer.select("#display");
        
        var margin = {top: 30, right: 120, bottom: 0, left: 120},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

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

        var barHeight = 20;

        var color = d3.scale.ordinal()
            .range(["steelblue", "#ccc"]);

        var duration = 750,
            delay = 25;
            
        var partition = d3.layout.partition()
            .value(function(d) { return d.size; });

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

        var svg = d3Container.append("svg")
            .attr(attrName, "")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr(attrName, "")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("rect")
            .attr(attrName, "")
            .attr("class", "background")
            .attr("width", width)
            .attr("height", height)
            .on("click", up);

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "x axis");

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "y axis")
        .append("line")
            .attr(attrName, "")
            .attr("y1", "100%");

        d3.json("app/components/bar-charts-hierarchical-bar-chart/readme.json", function(error, root) {
            if (error) throw error;

            partition.nodes(root);  
            x.domain([0, root.value]).nice();
            down(root, 0);
        });
        
        

        function down(d, i) {
            if (!d.children || window.__transition__) return;
            var end = duration + d.children.length * delay;

            // Mark any currently-displayed bars as exiting.
            var exit = svg.selectAll(".enter")
                .attr("class", "exit");

            // Entering nodes immediately obscure the clicked-on bar, so hide it.
            exit.selectAll("rect").filter(function(p) { return p === d; })
                .style("fill-opacity", 1e-6);

            // Enter the new bars for the clicked-on data.
            // Per above, entering bars are immediately visible.
            var enter = bar(d)
                .attr("transform", stack(i))
                .style("opacity", 1);

            // Have the text fade-in, even though the bars are visible.
            // Color the bars as parents; they will fade to children if appropriate.
            enter.select("text").style("fill-opacity", 1e-6);
            enter.select("rect").style("fill", color(true));

            // Update the x-scale domain.
            x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();

            // Update the x-axis.
            svg.selectAll(".x.axis").transition()
                .duration(duration)
                .call(xAxis);

            // Transition entering bars to their new position.
            var enterTransition = enter.transition()
                .duration(duration)
//.........这里部分代码省略.........