本文整理汇总了TypeScript中d3.scale类的典型用法代码示例。如果您正苦于以下问题：TypeScript scale类的具体用法？TypeScript scale怎么用？TypeScript scale使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了scale类的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: createScales
export function createScales(props: PositionsBubbleChartProps) {
const ratio = 12.5
const { width, height } = props.size
const minR = 15
const maxR = 60
const offset = maxR / 2
const positionData = getPositionsDataFromSeries(props.data, props.currencyPairs)
const baseValues = _.map(positionData, (val: any) => {
return Math.abs(val[baseTradedAmountName])
})
const maxValue = _.max(baseValues) || 0
let minValue = _.min(baseValues) || 0
if (minValue === maxValue) minValue = 0
const scales = {
x: d3.scale.linear()
.domain([0, props.data.length])
.range([(-(width / ratio)), (width / ratio) - offset]),
y: d3.scale.linear()
.domain([0, props.data.length])
.range([-(height / (ratio)), height / ratio]),
r: d3.scale.sqrt()
.domain([minValue, maxValue])
.range([minR, maxR])}
return scales
}
开发者ID:carlosrfernandez，项目名称:ReactiveTraderCloud，代码行数:30，代码来源:chartUtil.ts
示例2: render
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;
}
开发者ID:nlesc-sherlock，项目名称:spiraljs，代码行数:34，代码来源:LineChart.ts
示例3: ngOnInit
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());
}
开发者ID:TiagoJSM，项目名称:Angular2_D3，代码行数:59，代码来源:bar-chart.component.ts
示例4: GenerateGraph
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));
}
开发者ID:cemegginson，项目名称:cemegginson.github.io，代码行数:48，代码来源:executions.ts
示例5: createChart
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); });
}
开发者ID:coshx，项目名称:portfolio_optimizer，代码行数:47，代码来源:barchart.component.ts
示例6: init
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;
}
开发者ID:xsurge83，项目名称:d3-charts，代码行数:58，代码来源:main.ts
示例7: init
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');
}
开发者ID:brewday，项目名称:waterprofile，代码行数:44，代码来源:bar-chart.component.ts
示例8: ngOnInit
ngOnInit() {
const data = [
{age: "<5" , population: 2704659},
{age: "5-13" , population: 4499890},
{age: "14-17" , population: 2159981},
{age: "18-24" , population: 3853788},
{age: "25-44" , population: 14106543},
{age: "45-64" , population: 8819342},
{age: "âĽ65" , population: 612463}
];
const pieSvg = d3.select(".pie");
const width = +pieSvg.attr("width"),
height = +pieSvg.attr("height"),
radius = Math.min(width, height) / 2;
const color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
const arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
const labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
const pie = d3.layout.pie<{age: string, population: number}>()
.sort(null)
.value(function(d) { return d.population; });
const svg = d3.select(".pie")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
const g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc as any)
.style("fill", function(d) { return color(d.data.age); } as any);
g.append("text")
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d as any) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.data.age;
});
}
开发者ID:TiagoJSM，项目名称:Angular2_D3，代码行数:55，代码来源:pie-chart.component.ts
示例9: getYScale
public getYScale(axis: Axis): d3.scale.Linear<number, number> {
var min = this.series.min(name);
var start = this.canvas.plotArea.axisSize.top;
var end = this.canvas.plotArea.axisSize.top + this.canvas.plotArea.height;
axis.setScaleType(ScaleType.Linear);
return d3.scale.linear()
.domain([1, min < 0 ? -1 : 0])
.range([start, end]);
}
开发者ID:frnkclsst，项目名称:d3charts，代码行数:11，代码来源:StackedPercentLineChart.ts
示例10: getXScale
public getXScale(axis: Axis): d3.scale.Linear<number, number> {
var min = this.series.min(name);
var start = this.canvas.plotArea.axisSize.left;
var end = this.canvas.plotArea.axisSize.left + this.canvas.plotArea.width;
axis.setScaleType(ScaleType.Linear);
return d3.scale.linear()
.domain([min < 0 ? -1 : 0, 1])
.range([start, end]);
}
开发者ID:frnkclsst，项目名称:d3charts，代码行数:11，代码来源:StackedPercentBarChart.ts
注：本文中的d3.scale类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。 |
客服电话
APP下载
官方微信
请发表评论