diff --git a/d3/d3-tests.ts b/d3/d3-tests.ts index 32fd555b9d..a2d707f88c 100644 --- a/d3/d3-tests.ts +++ b/d3/d3-tests.ts @@ -643,3 +643,59 @@ function dragMultiples { } } +//Example from http://bl.ocks.org/mbostock/3892919 +function panAndZoom { + 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.linear() + .domain([-width / 2, width / 2]) + .range([0, width]); + + var y = d3.scale.linear() + .domain([-height / 2, height / 2]) + .range([height, 0]); + + var xAxis = d3.svg.axis() + .scale(x) + .orient("bottom") + .tickSize(-height); + + var yAxis = d3.svg.axis() + .scale(y) + .orient("left") + .ticks(5) + .tickSize(-width); + + var zoom = d3.behavior.zoom() + .x(x) + .y(y) + .scaleExtent([1, 10]) + .on("zoom", zoomed); + + 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 + ")") + .call(zoom); + + svg.append("rect") + .attr("width", width) + .attr("height", height); + + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis); + + svg.append("g") + .attr("class", "y axis") + .call(yAxis); + + function zoomed() { + svg.select(".x.axis").call(xAxis); + svg.select(".y.axis").call(yAxis); + } +} diff --git a/d3/d3.d.ts b/d3/d3.d.ts index 556d02af7b..8d3740b961 100644 --- a/d3/d3.d.ts +++ b/d3/d3.d.ts @@ -47,6 +47,9 @@ module D3 { * Constructs a new drag behaviour */ drag: () => Drag; + /** + * Constructs a new zoom behaviour + */ zoom: () => Zoom; } @@ -299,99 +302,417 @@ module D3 { bisector(accessor: (data: any, index: number) => any): any; /** * Randomize the order of an array. + * + * @param arr Array to randomise */ shuffle(arr: any[]): any[]; /** * Reorder an array of elements according to an array of indexes + * + * @param arr Array to reorder + * @param indexes Array containing the order the elements should be returned in */ permute(arr: any[], indexes: any[]): any[]; /** * Transpose a variable number of arrays. + * + * @param arrs Arrays to transpose */ zip(...arrs: any[]): any[]; /** * Transpose an array of arrays. + * + * @param matrix Two dimensional array to transpose */ transpose(matrix: any[]): any[]; /** * List the keys of an associative array. + * + * @param map Array of objects to get the key values from */ keys(map: any[]): any[]; /** * List the values of an associative array. + * + * @param map Array of objects to get the values from */ values(map: any[]): any[]; /** * List the key-value entries of an associative array. + * + * @param map Array of objects to get the key-value pairs from */ entries(map: any[]): any[]; /** * merge multiple arrays into one array + * + * @param map Arrays to merge */ merge(...map: any[]): any[]; /** * Generate a range of numeric values. */ - range: (start: number, stop?: number, step?: number) => number[]; + range: { + /** + * Generate a range of numeric values from 0. + * + * @param stop Value to generate the range to + * @param step Step between each value + */ + (stop: number, step?: number): number[]; + /** + * Generate a range of numeric values. + * + * @param start Value to start + * @param stop Value to generate the range to + * @param step Step between each value + */ + (start: number, stop?: number, step?: number): number[]; + }; /** - * Group array elements hierarchically. + * Create new nest operator */ nest(): Nest; - // Loading resources + /** + * Request a resource using XMLHttpRequest. + */ xhr: { - (url: string, callback: (xhr: XMLHttpRequest) => void ): void; - (url: string, mime: string, callback: (xhr: XMLHttpRequest) => void ): void; + /** + * Creates an asynchronous request for specified url + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, callback?: (xhr: XMLHttpRequest) => void ): Xhr; + /** + * Creates an asynchronous request for specified url + * + * @param url Url to request + * @param mime MIME type to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, mime: string, callback?: (xhr: XMLHttpRequest) => void ): Xhr; }; + /** + * Request a text file + */ text: { - (url: string, callback: (response: string) => void ): void; - (url: string, mime: string, callback: (response: string) => void ): void; + /** + * Request a text file + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, callback?: (response: string) => void ): Xhr; + /** + * Request a text file + * + * @param url Url to request + * @param mime MIME type to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, mime: string, callback?: (response: string) => void ): Xhr; }; - json: (url: string, callback: (response: any) => void ) => void; + /** + * Request a JSON blob + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + json: (url: string, callback?: (response: any) => void ) => Xhr; + /** + * Request an HTML document fragment. + */ xml: { - (url: string, callback: (response: Document) => void ): void; - (url: string, mime: string, callback: (response: Document) => void ): void; + /** + * Request an HTML document fragment. + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, callback?: (response: Document) => void ): Xhr; + /** + * Request an HTML document fragment. + * + * @param url Url to request + * @param mime MIME type to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, mime: string, callback?: (response: Document) => void ): Xhr; }; - html: (url: string, callback: (response: DocumentFragment) => void ) => void; + /** + * Request an XML document fragment. + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + html: (url: string, callback?: (response: DocumentFragment) => void ) => Xhr; + /** + * Request a comma-separated values (CSV) file. + */ csv: { - (url: string, callback: (error: any, response: any[]) => void ); + /** + * Request a comma-separated values (CSV) file. + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, callback?: (error: any, response: any[]) => void ): Xhr; + /** + * Parse a CSV string into objects using the header row. + * + * @param string CSV formatted string to parse + */ parse(string: string): any[]; + /** + * Parse a CSV string into tuples, ignoring the header row. + * + * @param string CSV formatted string to parse + */ parseRows(string: string, accessor: (row: any[], index: number) => any): any; + /** + * Format an array of tuples into a CSV string. + * + * @param rows Array to convert to a CSV string + */ format(rows: any[]): string; }; + /** + * Request a tab-separated values (TSV) file + */ tsv: { - (url: string, callback: (error: any, response: any[]) => void ); + /** + * Request a tab-separated values (TSV) file + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, callback?: (error: any, response: any[]) => void ): Xhr; + /** + * Parse a TSV string into objects using the header row. + * + * @param string TSV formatted string to parse + */ parse(string: string): any[]; + /** + * Parse a TSV string into tuples, ignoring the header row. + * + * @param string TSV formatted string to parse + */ parseRows(string: string, accessor: (row: any[], index: number) => any): any; + /** + * Format an array of tuples into a TSV string. + * + * @param rows Array to convert to a TSV string + */ format(rows: any[]): string; }; + /** + * Time Functions + */ time: Time; + + /** + * Scales + */ scale: { + /** + * Construct a linear quantitative scale. + */ linear(): LinearScale; + /* + * Construct an ordinal scale. + */ ordinal(): OrdinalScale; + /** + * Construct a linear quantitative scale with a discrete output range. + */ quantize(): QuantizeScale; + /* + * Construct an ordinal scale with ten categorical colors. + */ category10(): OrdinalScale; + /* + * Construct an ordinal scale with twenty categorical colors + */ category20(): OrdinalScale; + /* + * Construct an ordinal scale with twenty categorical colors + */ category20b(): OrdinalScale; + /* + * Construct an ordinal scale with twenty categorical colors + */ category20c(): OrdinalScale; }; + /* + * Interpolate two values + */ interpolate: BaseInterpolate; + /* + * Interpolate two numbers + */ interpolateNumber: BaseInterpolate; + /* + * Interpolate two integers + */ interpolateRound: BaseInterpolate; + /* + * Interpolate two strings + */ interpolateString: BaseInterpolate; + /* + * Interpolate two RGB colours + */ interpolateRgb: BaseInterpolate; + /* + * Interpolate two HSL colours + */ interpolateHsl: BaseInterpolate; + /* + * Interpolate two arrays of values + */ interpolateArray: BaseInterpolate; + /* + * Interpolate two arbitary objects + */ interpolateObject: BaseInterpolate; + /* + * Interpolate two 2D matrix transforms + */ interpolateTransform: BaseInterpolate; + + /** + * Layouts + */ layout: Layout; + + /** + * Svg's + */ svg: Svg; + + /** + * Random number generators + */ random: Random; + /** + * Create a function to format a number as a string + * + * @param specifier The format specifier to use + */ format(specifier: string): (value: number) => string; } + interface Xhr { + /** + * Get or set request header + */ + header: { + /** + * Get the value of specified request header + * + * @param name Name of header to get the value for + */ + (name: string): string; + /** + * Set the value of specified request header + * + * @param name Name of header to set the value for + * @param value Value to set the header to + */ + (name: string, value: string): Xhr; + }; + /** + * Get or set MIME Type + */ + mimeType: { + /** + * Get the current MIME Type + */ + (): string; + /** + * Set the MIME Type for the request + * + * @param type The MIME type for the request + */ + (type: string): Xhr; + }; + /* + * Get or Set the function used to map the response to the associated data value + */ + response: { + /** + * Get function used to map the response to the associated data value + */ + (): (xhr: XMLHttpRequest) => any; + /** + * Set function used to map the response to the associated data value + * + * @param value The function used to map the response to a data value + */ + (value: (xhr: XMLHttpRequest) => any ): Xhr; + }; + /** + * Issue the request using the GET method + * + * @param callback Function to invoke on completion of request + */ + get (callback?: (xhr: XMLHttpRequest) => void ): Xhr; + /** + * Issue the request using the POST method + */ + post: { + /** + * Issue the request using the POST method + * + * @param callback Function to invoke on completion of request + */ + (callback?: (xhr: XMLHttpRequest) => void ): Xhr; + /** + * Issue the request using the POST method + * + * @param data Data to post back in the request + * @param callback Function to invoke on completion of request + */ + (data: any, callback?: (xhr: XMLHttpRequest) => void ): Xhr; + }; + /** + * Issues this request using the specified method + */ + send: { + /** + * Issues this request using the specified method + * + * @param method Method to use to make the request + * @param callback Function to invoke on completion of request + */ + (method: string, callback?: (xhr: XMLHttpRequest) => void ): Xhr; + /** + * Issues this request using the specified method + * + * @param method Method to use to make the request + * @param data Data to post back in the request + * @param callback Function to invoke on completion of request + */ + (method: string, data: any, callback?: (xhr: XMLHttpRequest) => void ): Xhr; + }; + /** + * Aborts this request, if it is currently in-flight + */ + abort(): Xhr; + /** + * Registers a listener to receive events + * + * @param type Enent name to attach the listener to + * @param listener Function to attach to event + */ + on: (type: string, listener: (data: any, index?: number) => any) => Xhr; + } + interface Selection extends Selectors { attr: { (name: string): string;