d3-stack-time - npm Package Compare versions

Comparing version 2.0.0 to 2.1.1

index.js

@@ -11,3 +11,3 @@ //
   var padding = {
-    top: 20,
+    top: 40,
     rigth: 100,
@@ -23,2 +23,10 @@ bottom: 30,
 
+  var titleText = '';
+  var titleTextX = 9;
+  var titleTextDY = '0.35em';
+  var titleTranslateX = 0;
+  var titleTranslateY = 0;
+  var titleColor = '#000';
+  var titleFontSize = '18';
+
   var xAxisNum = 24;
@@ -147,2 +155,14 @@
         .on('mouseleave.tip', tip.hide);
+      // 画标题
+      var title = chart.append('g')
+        .attr('class', 'title')
+        .attr('transform', function (d) {
+          return 'translate(' + (width / 2 + titleTranslateX) + ',' + (-padding.top / 2 + titleTranslateY) + ')';
+        });
+      title.append('text')
+        .attr('x', titleTextX)
+        .attr('dy', titleTextDY)
+        .attr('fill', titleColor)
+        .attr('fontSize', titleFontSize)
+        .text(titleText);
       // 画图例
@@ -367,2 +387,51 @@ var legend = serie.append('g')
   };
+  chart.titleText = function (_) {
+    if (!arguments.length) {
+      return titleText;
+    }
+    titleText = _;
+    return chart;
+  };
+  chart.titleTextX = function (_) {
+    if (!arguments.length) {
+      return titleTextX;
+    }
+    titleTextX = _;
+    return chart;
+  };
+  chart.titleTextDY = function (_) {
+    if (!arguments.length) {
+      return titleTextDY;
+    }
+    titleTextDY = _;
+    return chart;
+  };
+  chart.titleTranslateX = function (_) {
+    if (!arguments.length) {
+      return titleTranslateX;
+    }
+    titleTranslateX = _;
+    return chart;
+  };
+  chart.titleTranslateY = function (_) {
+    if (!arguments.length) {
+      return titleTranslateY;
+    }
+    titleTranslateY = _;
+    return chart;
+  };
+  chart.titleColor = function (_) {
+    if (!arguments.length) {
+      return titleColor;
+    }
+    titleColor = _;
+    return chart;
+  };
+  chart.titleFontSize = function (_) {
+    if (!arguments.length) {
+      return titleFontSize;
+    }
+    titleFontSize = _;
+    return chart;
+  };
   chart.xAxisNum = function (_) {
@@ -369,0 +438,0 @@ if (!arguments.length) {

package.json

 {
   "name": "d3-stack-time",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "d3 stack time",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # d3-stack-time
-d3  stack time
+
+一个D3时间堆叠图插件。
+
+## 用法
+```
+// 导入D3与本插件
+var d3 = require('d3');
+var chart = require('d3-stack-time');
+
+var data = {
+  axisX: ['5-1', '5-2', '5-3', '5-4', '5-5', '5-6', '5-7', '5-8', '5-9', '5-10', '5-11', '5-12', '5-13', '5-14', '5-15', '5-16'],
+  values: ["", "", " 08:48 18:40", " 09:20 20:26", " 09:06 20:33", " 09:00 19:20", " 09:15 18:11", "", " 09:27 21:04", " 09:24 19:05", " 09:16 18:47", " 09:14 19:09", " 09:06 20:06", "", "", " 09:35 19:00"]
+};
+d3.select('.time-stack').call(chart()
+  .data(data) // 数据
+  .titleText('test_title') // 图表标题
+  .stackLabelCustom({ // 自定义图例
+    'workBefore': 'Are you Ready?'
+  })
+);
+
+```

No alert changes

Improved metrics

Total package byte prevSize

17819

14.9%

Lines of code

517

15.14%

Number of lines in readme file

24

700%

No dependency changes