Merge pull request #3471 from hansrwindhoff/master

Jason Davies cloud layout https://www.npmjs.com/package/d3.layout.cloud
2026-08-16 23:10:29 +00:00 · 2015-01-17 11:53:24 +09:00
parent dd6c1e5ea3 2b646da6ae
commit 6c4099e81e
2 changed files with 88 additions and 0 deletions
@@ -0,0 +1,43 @@
+/// <reference path="../d3/d3.d.ts" />
+/// <reference path="d3.cloud.layout.d.ts" />
+
+  interface ICompTextSize{
+    text:string;
+    size:number;
+    x?:number;
+    y?:number;
+    rotate?:number;
+  }
+
+
+  var fill = d3.scale.category20();
+  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)
+      .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; });
+  }
@@ -0,0 +1,45 @@
+// Type definitions for d3JS cloud layout plugin by Jason Davies
+// Project: https://github.com/jasondavies/d3-cloud
+// Definitions by: hans windhoff <https://github.com/hansrwindhoff>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="../d3/d3.d.ts" />
+
+declare module D3 {
+  export module Layout {
+    export interface IRotate      { 
+      (number:number) : CloudLayout;
+        (number:()=>number) : CloudLayout;
+        }
+
+
+
+    export interface CloudLayout {
+      (layers: any[], index?: number): any[];
+      values(accessor?: (d: any) => any): CloudLayout;
+      offset(offset: string): CloudLayout;
+      size: {
+        /**
+      * Gets the available layout size 
+      */
+        (): Array<number>;
+        /**
+      * Sets the available layout size 
+      */
+        (size: Array<number>): CloudLayout;
+      };
+      words: (inputArray: Array<any>) => CloudLayout;
+      rotate:IRotate;
+      padding: (number:number) => CloudLayout;
+      font: (string:string) => CloudLayout;
+      fontSize(fctn: (d: any) => number): CloudLayout;
+      on: (eventname: string, callee: (words: any[]) => void) => CloudLayout;
+      start: () => CloudLayout;
+    }
+
+
+    export interface Layout {
+      cloud(): CloudLayout; 
+    }
+  }
+}