fix: change param type for spiral function in d3-cloud (#43226)

* chore: format d3-cloud definitions and tests

* fix: change param type for spiral function in d3-cloud

Reference https://github.com/jasondavies/d3-cloud#spiral

* fix: annotate an unused function param in d3-cloud test
This commit is contained in:
Japorized 2020-03-20 23:35:03 +08:00 committed by GitHub
parent 18a399b465
commit 2161f2afc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 44 deletions

View File

@ -7,46 +7,68 @@ d3Cloud();
// $ExpectType Cloud<Word>
d3.layout.cloud();
interface ICompTextSize{
text:string;
size:number;
x?:number;
y?:number;
rotate?:number;
interface ICompTextSize {
text: string;
size: number;
x?: number;
y?: number;
rotate?: number;
}
function archimedeanSpiral(size: [number, number]): (t: number) => [number, number] {
var e = size[0] / size[1];
return (t: number) => {
const s = t * 0.1;
return [e * s * Math.sin(s), s * Math.cos(s)];
};
}
var fill = d3.scale.category20<number>();
d3.layout.cloud().size([300, 300])
.words([
"Hello", "world", "normally", "you", "want", "more", "words",
"than", "this"].map(function(d:string) {
return {text: d, size: 10 + Math.random() * 90};
}))
d3.layout
.cloud()
.size([300, 300])
.words(
['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'].map(function(d: string) {
return { text: d, size: 10 + Math.random() * 90 };
}),
)
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d:ICompTextSize) { return d.size; })
.on("end", draw)
.rotate(function() {
return ~~(Math.random() * 2) * 90;
})
.font('Impact')
.fontSize(function(d: ICompTextSize) {
return d.size;
})
.spiral(archimedeanSpiral)
.on('end', draw)
.random()
.canvas()
.start();
function draw(words:ICompTextSize[]) {
d3.select("body").append("svg")
.attr("width", 300)
.attr("height", 300)
.append("g")
.attr("transform", "translate(150,150)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d:ICompTextSize) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d:ICompTextSize, i:number) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d:ICompTextSize) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d:ICompTextSize) { return d.text; });
function draw(words: ICompTextSize[]) {
d3.select('body')
.append('svg')
.attr('width', 300)
.attr('height', 300)
.append('g')
.attr('transform', 'translate(150,150)')
.selectAll('text')
.data(words)
.enter()
.append('text')
.style('font-size', function(d: ICompTextSize) {
return d.size + 'px';
})
.style('font-family', 'Impact')
.style('fill', function(_d: ICompTextSize, i: number) {
return fill(i);
})
.attr('text-anchor', 'middle')
.attr('transform', function(d: ICompTextSize) {
return 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')';
})
.text(function(d: ICompTextSize) {
return d.text;
});
}

View File

@ -59,9 +59,9 @@ declare module 'd3' {
text(text: string): Cloud<T>;
text(text: (datum: T, index: number) => string): Cloud<T>;
spiral(): (size: number) => (t: number) => [number, number];
spiral(): (size: [number, number]) => (t: number) => [number, number];
spiral(name: string): Cloud<T>;
spiral(spiral: (size: number) => (t: number) => [number, number]): Cloud<T>;
spiral(spiral: (size: [number, number]) => (t: number) => [number, number]): Cloud<T>;
fontSize(): (datum: T, index: number) => number;
fontSize(size: number): Cloud<T>;
@ -71,10 +71,10 @@ declare module 'd3' {
padding(padding: number): Cloud<T>;
padding(padding: (datum: T, index: number) => number): Cloud<T>;
/**
/**
* If specified, sets the internal random number generator,used for selecting the initial position of each word,
* and the clockwise/counterclockwise direction of the spiral for each word.
*
*
* @param randomFunction should return a number in the range [0, 1).The default is Math.random.
*/
random(): Cloud<T>;
@ -84,17 +84,17 @@ declare module 'd3' {
* If specified, sets the canvas generator function, which is used internally to draw text.
* When using Node.js, you will almost definitely override the default, e.g. using the canvas module.
* @param canvasGenerator should return a HTMLCanvasElement.The default is: ()=>{document.createElement("canvas");}
*
*
*/
canvas():Cloud<T>;
canvas(): Cloud<T>;
canvas(canvasGenerator: () => HTMLCanvasElement): Cloud<T>;
on(type: "word", listener: (word: T) => void): Cloud<T>;
on(type: "end", listener: (tags: T[], bounds: { x: number; y: number }[]) => void): Cloud<T>;
on(type: 'word', listener: (word: T) => void): Cloud<T>;
on(type: 'end', listener: (tags: T[], bounds: { x: number; y: number }[]) => void): Cloud<T>;
on(type: string, listener: (...args: any[]) => void): Cloud<T>;
on(type: "word"): (word: T) => void;
on(type: "end"): (tags: T[], bounds: { x: number; y: number }[]) => void;
on(type: 'word'): (word: T) => void;
on(type: 'end'): (tags: T[], bounds: { x: number; y: number }[]) => void;
on(type: string): (...args: any[]) => void;
}
}