feat: support display video (#23)

Author: xudafeng

lib/d3-tree.js

@@ -20,8 +20,8 @@ class D3Tree {
     this.container = null;
     this.layerDepth = null;
     this.maxLayerDepth = 0;
-    this.imageHeight = 100;
-    this.imageWidth = 100;
+    this.resourceHeight = 100;
+    this.resourceWidth = 100;
     this.transition = null;
     this.textLength = 0;
     this.fontSize = 14;
@@ -34,8 +34,8 @@ class D3Tree {
       selector: 'body',
       prefixClass: 'd3-tree',
       data: {},
-      imageHeight: 200,
-      imageWidth: 200,
+      resourceHeight: 200,
+      resourceWidth: 200,
       imageMargin: 10
     }, options);
   }
@@ -103,15 +103,15 @@ class D3Tree {
     return maxLayerDepth;
   }
 
-  checkImageHeight(root) {
+  checkResourceHeight(root) {
     if (root.children) {
       let imageMargin = root.children.length > 1 ? root.children[1].x - root.children[0].x : 0;
-      if (this.imageHeight + this.options.imageMargin > imageMargin && imageMargin) {
-        this.imageHeight = imageMargin - this.options.imageMargin;
-        this.imageWidth = this.imageHeight * this.options.imageWidth / this.options.imageHeight;
+      if (this.resourceHeight + this.options.imageMargin > imageMargin && imageMargin) {
+        this.resourceHeight = imageMargin - this.options.imageMargin;
+        this.resourceWidth = this.resourceHeight * this.options.resourceWidth / this.options.resourceHeight;
       }
       root.children.forEach(child => {
-        this.checkImageHeight(child);
+        this.checkResourceHeight(child);
       });
     }
   }
@@ -121,16 +121,16 @@ class D3Tree {
     this.root = d3.hierarchy(this.options.data);
     this.layerDepth = Array(this.root.height + 1).fill(0);
     this.maxLayerDepth = this.findMaxLayer(this.root, 0, this.layerDepth);
-    this.imageHeight = this.options.height / Math.max(...this.maxLayerDepth) >= this.options.imageHeight ?
-      this.options.imageHeight :
+    this.resourceHeight = this.options.height / Math.max(...this.maxLayerDepth) >= this.options.resourceHeight ?
+      this.options.resourceHeight :
       this.options.height / Math.max(...this.maxLayerDepth) - 10;
-    this.imageWidth = this.imageHeight * this.options.imageWidth / this.options.imageHeight;
+    this.resourceWidth = this.resourceHeight * this.options.resourceWidth / this.options.resourceHeight;
     this.tree = d3.tree().size([
       this.options.height,
-      this.options.width - this.imageWidth - this.fontSize * this.textLength
+      this.options.width - this.resourceWidth - this.fontSize * this.textLength
     ]);
     this.tree(this.root);
-    this.checkImageHeight(this.root);
+    this.checkResourceHeight(this.root);
 
     this
       .container
@@ -140,7 +140,7 @@ class D3Tree {
       .append('path')
       .attr('class', `${this.options.prefixClass}-link`)
       .attr('d', d => {
-        return `M${d.y},${d.x}C${d.parent.y + this.imageWidth},${d.x} ${d.parent.y + this.imageWidth + 110},${d.parent.x} ${d.parent.y + this.imageWidth + 10},${d.parent.x}`;
+        return `M${d.y},${d.x}C${d.parent.y + this.resourceWidth},${d.x} ${d.parent.y + this.resourceWidth + 110},${d.parent.x} ${d.parent.y + this.resourceWidth + 10},${d.parent.x}`;
       });
 
     const node = this
@@ -154,32 +154,47 @@ class D3Tree {
         return `translate(${d.y},${d.x})`;
       })
       .each(function(d) {
-        let imageList = d.data.image;
-        if (imageList && !!~imageList.indexOf('[')) {
-          imageList = imageList
+        let resourceList = d.data.image;
+        if (resourceList && !!~resourceList.indexOf('[')) {
+          resourceList = resourceList
             .replace(/(\[\n|\n\]| )/g, '')
             .split('\n');
         } else {
-          imageList = [imageList];
+          resourceList = [resourceList];
         }
 
-        const imageWidth = that.imageWidth / imageList.length;
-        const imageHeight = that.imageHeight / imageList.length;
-
-        imageList.forEach((image, index) => {
-          d3.select(this)
-            .append('image')
-            .attr('xlink:href', image)
-            .attr('data-index', index)
-            .attr('height', d => {
-              return imageHeight;
-            })
-            .attr('transform', d => {
-              return `translate(${imageWidth * index}, -${imageHeight / 2})`;
-            })
-            .attr('width', d => {
-              return imageWidth;
-            });
+        const resourceWidth = that.resourceWidth / resourceList.length;
+        const resourceHeight = that.resourceHeight / resourceList.length;
+
+        resourceList.forEach((resource, index) => {
+          if (resource && resource.endsWith('.webm')) {
+            d3.select(this)
+              .append('video')
+              .attr('src', resource)
+              .attr('type', 'video/webm')
+              .attr('controls', 'controls')
+              .attr('data-index', index)
+              .attr('style', d => {
+                return `width: ${resourceWidth}px; height: ${resourceHeight}px`;
+              })
+              .attr('transform', d => {
+                return `translate(${resourceWidth * index}, -${resourceHeight / 2})`;
+              });
+          } else {
+            d3.select(this)
+              .append('image')
+              .attr('xlink:href', resource)
+              .attr('data-index', index)
+              .attr('height', d => {
+                return resourceHeight;
+              })
+              .attr('transform', d => {
+                return `translate(${resourceWidth * index}, -${resourceHeight / 2})`;
+              })
+              .attr('width', d => {
+                return resourceWidth;
+              });
+          }
         });
       });
 
@@ -193,10 +208,10 @@ class D3Tree {
         const isMulti = lineCount !== 1;
         let heightHalf = isMulti ? this.fontSize * this.lineHeight * (lineCount + 1) / 2 : 0;
         if (d.data.image) {
-          return `translate(${that.imageWidth + 10}, ${-heightHalf})`;
+          return `translate(${that.resourceWidth + 10}, ${-heightHalf})`;
         } else {
           const textLength = d.data && d.data.text && d.data.text.length || 0;
-          return `translate(${that.imageWidth / 2 - 2 * textLength}, ${-heightHalf})`;
+          return `translate(${that.resourceWidth / 2 - 2 * textLength}, ${-heightHalf})`;
         }
       });
   };
@@ -207,7 +222,7 @@ class D3Tree {
     this.transition = this.container.transition().duration(this.options.duration);
     this.transition.selectAll(`.${this.options.prefixClass}-link`)
       .attr('d', d => {
-        return `M${d.y},${d.x}C${d.parent.y + this.imageWidth},${d.x} ${d.parent.y + this.imageWidth + 110},${d.parent.x} ${d.parent.y + this.imageWidth + 10},${d.parent.x}`;
+        return `M${d.y},${d.x}C${d.parent.y + this.resourceWidth},${d.x} ${d.parent.y + this.resourceWidth + 110},${d.parent.x} ${d.parent.y + this.resourceWidth + 10},${d.parent.x}`;
       });
     this.transition.selectAll(`.${this.options.prefixClass}-node`)
       .attr('transform', d => {
@@ -216,10 +231,10 @@ class D3Tree {
     this.transition.selectAll('text')
       .attr('transform', d => {
         if (d.data.image) {
-          return `translate(${this.imageWidth + 10}, 4)`;
+          return `translate(${this.resourceWidth + 10}, 4)`;
         } else {
           const textLength = d.data && d.data.text && d.data.text.length || 0;
-          return `translate(${this.imageWidth / 2 - 2 * textLength}, 4)`;
+          return `translate(${this.resourceWidth / 2 - 2 * textLength}, 4)`;
         }
       });
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3-tree",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "tree view based on d3",
   "keywords": [
     "d3",