当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript d3.csv函数代码示例

本文整理汇总了TypeScript中d3.csv函数的典型用法代码示例。如果您正苦于以下问题:TypeScript csv函数的具体用法?TypeScript csv怎么用?TypeScript csv使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。


在下文中一共展示了csv函数的6个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。

示例1: line

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

let current_graph:number = 1;
d3.csv("data/cp_executed.csv", function(data){
for (let i in data) {
    let actual_data:number[] = [];
    for (let j in years) {
        actual_data.push(parseInt(data[i][j]))
    }
    GenerateGraph(data[i], current_graph);
    current_graph++;
}
});
开发者ID:cemegginson,项目名称:cemegginson.github.io,代码行数:30,代码来源:executions.ts

示例2: StackedLineChart

document.addEventListener('DOMContentLoaded', ()=> {

    let chart = new StackedLineChart({
        height: 300,
        target: document.getElementById('chart'),
    });

    d3.csv("./output.csv")
        .get(function (error, rows) {

            let dataGroups:ChartData[] = [
                    new ChartData('acceleration', []),
                    new ChartData('x', []),
                    new ChartData('y', []),
                    new ChartData('z', [])
                ],
                xAxisData:any[] = [];

            var seconds = 0,
                prevValue, prevMilliSecond;

            debugger;
            rows.forEach((row:any)=> {

                var accelerate = parseFloat(row.acceleration),
                    x = parseFloat(row.x),
                    y = parseFloat(row.y),
                    z = parseFloat(row.z),
                    milliSecond;

                if (x === 0 && y === 0 && z === 0) {
                    return;
                }

                xAxisData.push(new Date(row.date));
                dataGroups[0].push(accelerate);
                dataGroups[1].push(x);
                dataGroups[2].push(y);
                dataGroups[3].push(z);

            });
            chart.render(xAxisData, dataGroups);

            // setTimeout(()=>{
            //     const SLICE_NUM = 30;
            //
            //     let newGroupData = [
            //         new ChartData('acceleration', []),
            //         new ChartData('x', []),
            //         new ChartData('y', []),
            //         new ChartData('z', [])
            //     ];
            //
            //     newGroupData[0].data = dataGroups[0].data.slice(0, SLICE_NUM);
            //     newGroupData[1].data = dataGroups[1].data.slice(0, SLICE_NUM);
            //     newGroupData[2].data = dataGroups[2].data.slice(0, SLICE_NUM);
            //     newGroupData[3].data = dataGroups[3].data.slice(0, SLICE_NUM);
            //     debugger;
            //     chart.updateData(xAxisData.slice(0, SLICE_NUM), newGroupData);
            // }, 4000 )

        });
});
开发者ID:xsurge83,项目名称:d3-charts,代码行数:63,代码来源:main.ts

示例3: line

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

let current_graph:number = 1;
d3.csv("data/cp_executed.csv", function(data){
for (let i in data) {
    let actual_data:number[] = [];
    let data_row = data[i];
    for (let j of years) {
        actual_data.push(+data_row[j]);
    }
    GenerateGraph(data[i]["Jurisdiction"], actual_data, current_graph);
    current_graph++;
}
});
开发者ID:cemegginson,项目名称:incarceration_rates,代码行数:30,代码来源:executions.ts

示例4: ngOnInit

    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: 20, right: 20, bottom: 30, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

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

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

        var color = d3.scale.ordinal()
            .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickFormat(d3.format(".2s"));

        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 + ")");

        d3.csv("app/components/bar-charts-stacked-bar-chart/data.tsv", function(error, data) {
            if (error) throw error;

            color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

            data.forEach(function(d) {
                var y0 = 0;
                d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
                d.total = d.ages[d.ages.length - 1].y1;
            });

            data.sort(function(a, b) { return b.total - a.total; });

            x.domain(data.map(function(d) { return d.State; }));
            y.domain([0, d3.max(data, function(d) { return d.total; })]);

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

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

            var state = svg.selectAll(".state")
                .data(data)
                .enter().append("g")
                .attr(attrName, "")
                .attr("class", "g")
                .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

            state.selectAll("rect")
                .attr(attrName, "")
                .data(function(d) { return d.ages; })
                .enter().append("rect")
                .attr(attrName, "")
                .attr("width", x.rangeBand())
                .attr("y", function(d) { return y(d.y1); })
                .attr("height", function(d) { return y(d.y0) - y(d.y1); })
                .style("fill", function(d) { return color(d.name); });

            var legend = svg.selectAll(".legend")
                .data(color.domain().slice().reverse())
                .enter().append("g")
                .attr(attrName, "")
                .attr("class", "legend")
                .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

            legend.append("rect")
                .attr(attrName, "")
//.........这里部分代码省略.........
开发者ID:Anhmike,项目名称:angular2-d3-sample,代码行数:101,代码来源:component.ts

示例5: require

declare const require: Function
const d3 = require('d3')
import measureFPS = require('../../measure')
import common = require('../common')
let resize: any = { interval: 60 }

d3
	.csv('ny-vs-sf.csv')
	.row((d: any) => ({
		NY: parseFloat(d.NY.split(';')[0]),
		SF: parseFloat(d.SF.split(';')[0])
	}))
	.get((error: any, data: any) => {
		if (error != null) alert('Data can\'t be downloaded or parsed')
		else {
			common.drawCharts(data)

			resize.request = function() {
				resize.timer && clearTimeout(resize.timer)
				resize.timer = setTimeout(resize.eval, resize.interval)
			}
			resize.eval = function() {
				d3.selectAll('svg').remove()
				d3.select('.charts').selectAll('div').append('svg')
				common.drawCharts(data)
			}
			window.addEventListener('resize', resize.request, false)
		}
	})

measureFPS.measure(3, function (fps: any) {
开发者ID:streamcode9,项目名称:svg-time-series,代码行数:31,代码来源:index.ts

示例6:

import * as d3 from "d3";

d3.csv('resources/cars.csv', (data) => {
    console.log(data);
})
开发者ID:tnobody,项目名称:MSE-BB-2-SS2016-INVI,代码行数:5,代码来源:main.ts


注:本文中的d3.csv函数示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。