support multiline

zhuyali · Jan 6, 2018 · c21f858 · c21f858
1 parent d6b8a8d
commit c21f858
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/assets/page.js b/assets/page.js
@@ -16,7 +16,7 @@ let data = {
     children: [{
       data: {
         image: testImg,
-        text: 'multi\nline中文\nline中文',
+        text: 'multi\nline中文\nline中文line中文line中文\nmulti\nline中文\nline中文',
       },
       children: []
     }, {

diff --git a/lib/d3-tree.js b/lib/d3-tree.js
@@ -1,29 +1,7 @@
 'use strict';
 
 const d3 = require('d3');
-
-d3.multiline = () => {
-  var getSpanY = (i, lineCount) => {
-    var y = (i - (lineCount - 1) / 2) * 1.4;
-    return y ? y + 'em' : 0;
-  };
-  return selection => {
-    selection.each(function(d, i) {
-      var text = d3.select(this);
-      var lines = (d.data.text || '').split(/\n/);
-      var lineCount = lines.length;
-
-      for (let i = 0; i < lineCount; i++) {
-        const line = lines[i];
-        text.append('tspan')
-          .attr('x', 0)
-          .attr('y', getSpanY(i, lineCount))
-          .attr('dy', '2em')
-          .text(line);
-      }
-    });
-  };
-};
+const _ = require('lodash');
 
 class D3Tree {
 
@@ -85,10 +63,35 @@ class D3Tree {
     this.renderTree();
   }
 
+  multiline() {
+    return selection => {
+      selection.each(function (d, i) {
+        let text = d3.select(this);
+        const lines = (d.data.text || '').split(/\n/);
+        const lineCount = lines.length;
+        const isMulti = lineCount !== 1;
+        for (let i = 0; i < lineCount; i++) {
+          const line = lines[i];
+          text.append('tspan')
+            .attr('x', 0)
+            .attr('dy', isMulti ? '1.5em' : '0')
+            .text(line);
+        }
+      });
+    };
+  }
+
   findMaxLayer(root, layer, maxLayerDepth) {
     if (root.children) {
       root.children.forEach(child => {
         let childTextLength = child.data.text ? child.data.text.length : 0;
+        const lines = (child.data.text || '').split(/\n/);
+        const lineCount = lines.length;
+        const isMulti = lineCount !== 1;
+        if (isMulti) {
+          let line = _.maxBy(lines, line => line.length);
+          childTextLength = line.length;
+        }
         this.textLength = this.textLength < childTextLength ? childTextLength : this.textLength;
         maxLayerDepth[layer + 1]++;
         this.findMaxLayer(child, layer + 1, maxLayerDepth);
@@ -165,15 +168,18 @@ class D3Tree {
     node
       .append('text')
       .attr('fill', '#111')
-      .text(d => {
-        return d.data.text;
-      })
-      .call(d3.multiline())
+      .call(this.multiline())
       .attr('transform', d => {
+        const lines = (d.data.text || '').split(/\n/);
+        const lineCount = lines.length;
+        const isMulti = lineCount !== 1;
+        const fontSize = 14;
+        const lineHeight = 1.5;
+        let heightHalf = isMulti ? fontSize * lineHeight * (lineCount + 1) / 2 : 0;
         if (d.data.image) {
-          return `translate(${this.imageWidth + 10}, 4)`;
+          return `translate(${this.imageWidth + 10}, ${-heightHalf})`;
         } else {
-          return `translate(${this.imageWidth / 2 - 2 * d.data.text.length}, 4)`;
+          return `translate(${this.imageWidth / 2 - 2 * d.data.text.length}, ${-heightHalf})`;
         }
       });
   };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-tree",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "tree view based on d3",
   "keywords": [
     "d3",
@@ -12,7 +12,8 @@
     "url": "git://github.com/zhuyali/d3-tree.git"
   },
   "dependencies": {
-    "d3": "^4.12.0"
+    "d3": "^4.12.0",
+    "lodash": "^4.17.4"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",