fix:修复y轴左侧空白过大的问题&较少y轴的显示密度d3-chart

1 files changed, 44 insertions, 14 deletions

diff --git a/nezha-fronted/src/components/charts/d3/d3Chart.js b/nezha-fronted/src/components/charts/d3/d3Chart.js
index 516720580..b49905fb4 100644
--- a/nezha-fronted/src/components/charts/d3/d3Chart.js
+++ b/nezha-fronted/src/components/charts/d3/d3Chart.js
@@ -78,14 +78,15 @@ export function D3LineChart(selector,option){
 
       this.createDefs()
 
-      this.creatScale();
+      this.createYScale();
+      this.createYAxis();
+      this.createYInnderBar();
+
+      this.createXScale()
       // if(this.type!==CHART_TYPE.BAR&&this.type!==CHART_TYPE.STACK_BAR){
       this.createXInnerBar();
       // }
-
-      this.createYInnderBar();
       this.createXAxis();
-      this.createYAxis();
 
       if(this._no_data!= true){
         if(this._type!==CHART_TYPE.BAR && this._type!==CHART_TYPE.STACK_BAR){
@@ -185,11 +186,6 @@ export function D3LineChart(selector,option){
       }
 
       this.minMax=getMinMax(this.datas);
-      let distance=computeDistance(this._dataFormatter(this.minMax.max,null,-1,3)+'');
-      if(this.options.padding.left < distance){
-        this.options.padding.left = distance
-      }
-
       let end=new Date().getTime()
 
       console.log('deal data',(end - start),'ms')
@@ -241,7 +237,7 @@ export function D3LineChart(selector,option){
         this._timeFormat=d3.timeFormat('%m-%d %H:%M')
       }
     },
-    creatScale:function(){
+    createXScale:function(){
       let t_max_min = d3.extent(this.datas[0], function(d) {
         return d[0];
       });
@@ -283,12 +279,14 @@ export function D3LineChart(selector,option){
           .rangeRound([0,this.xScale.bandwidth()])
       }
 
+
+    },
+    createYScale:function(){
       let minMax=this.minMax
       //纵坐标轴比例尺
       this.yScale = d3.scaleLinear()
         .domain([minMax.min, Math.round(minMax.max*1.05)])
         .range([this.options.height - this._foot_height, this._head_height]);
-
     },
     createZoom:function(){
       let $self=this;
@@ -381,7 +379,7 @@ export function D3LineChart(selector,option){
         .scale(this.yScale)
         .tickSize(-(this.options.width - this.options.padding.left - this.options.padding.right), 0, 0)
         .tickFormat("")
-        .ticks(10);
+        .ticks(4);
       this.yInner=yInner
       //添加纵轴网格线
       let yInnerBar = this.svg.append("g")
@@ -416,10 +414,15 @@ export function D3LineChart(selector,option){
     createYAxis:function(){
       let dataFormatter=this._dataFormatter;
       let $self=this;
+      let yVals=null;
       //定义纵轴
       let yAxis = d3.axisLeft()
         .scale(this.yScale)
+        .ticks(4)
         .tickFormat(function(d,i,g){
+          if(yVals){
+            return yVals[i];
+          }
           let yAxisVals=g.map(item=>{
             return item.__data__;
           })
@@ -434,14 +437,24 @@ export function D3LineChart(selector,option){
               return dataFormatter(item,null,-1,dot)
             })
           }
-
+          yVals=yAxisVals
           return yAxisVals[i];
         })
       this.yAxis=yAxis;
+
+      let tempYAxis=this.svg.append('g').call(yAxis);
+
+      let distance=d3.max(yVals,function(d,i){
+
+        return computeDistance(d)
+      })
+      $self.setPaddingLeft(distance)
+
+      tempYAxis.remove();
       //添加纵轴
       let yBar = this.svg.append("g")
         .attr("class", "left_axis")
-        .attr("transform", "translate(" + this.options.padding.left + ",0)")
+        .attr("transform", "translate(" + distance + ",0)")
         .call(yAxis);
 
       if(!this.options.showYAxisTick){
@@ -449,6 +462,23 @@ export function D3LineChart(selector,option){
         yAxis.select('.domain').remove();
         yAxis.selectAll('.tick').select('line').remove()
       }
+
+      /*let yTexts=this.svg.select('.left_axis').selectAll('.tick')
+
+      let nodes=yTexts.nodes()
+
+      if(nodes.length>4){
+        nodes.forEach((t,i)=>{
+          if(i%2==0){
+            t.remove()
+          }
+        })
+      }
+
+*/
+    },
+    setPaddingLeft:function(val){
+      this.options.padding.left=val
     },
     createLegends:function(){
       let $self=this;