Как добавить axesLables в n3-диаграммы

Question

Я использую n3-диаграммы для отображения диаграмм на веб-странице на основе угловых. Все работает нормально, но я не могу найти простой способ добавить метку к оси. Я что-то пропустил? Обычно к этому добавляется что-то вроде единицы времени или процента.

Answer 1

Я не вижу опции API для этого. Так вот быстро и некрасиво хак с помощью ng-init:

$scope.onInit = function(){ 
    setTimeout(function(){ 
     var axis = d3.select(".x.axis"); 
     var width = axis.node().getBBox().width; 
     axis.append("text") 
     .text("X Axis Label") 
     .attr("dy", 30) 
     .attr("dx", width /2) 
     .attr("text-anchor","middle"); 

     axis = d3.select(".y.axis"); 
     var text = axis.append("text") 
     .text("Y Axis Label"); 
     var tWidth = text.node().getComputedTextLength(); 
     text.attr("dy", 15) 
     .attr("dx", -tWidth) 
     .attr("text-anchor","start") 
     .attr("transform","rotate(-90)") 
     .text("Y Axis Label"); 

    }, 100); 
    }; 

Пример here.

Answer 2

Thanx Mark Я немного уточнил ваше предложение, поэтому оно работает с событием изменения размера, и если у меня есть две оси y. Мой код:

$scope.init = function(){ 
     //var svg = $("svg"); 
     //console.log("svg found "+svg); 
     console.log("d3 found "+d3); 
     setTimeout(function(){ 
      self.redrawAxisLabels(); 

}, 100); 
     var window = angular.element($window); 
     window.bind('resize',function(){ 
      setTimeout(function(){ 
      self.redrawAxisLabels(); 
      }, 100); 
      console.log('resize'); 
     }); 

    }; 
    this.redrawAxisLabels = function(){ 
     self.appendXlabel(); 
     self.appendYlabel(); 
     self.appendY2label(); 
    }, 
    this.appendXlabel = function(){ 
     var axis = d3.select(".x.axis"); 
     var width = axis.node().getBBox().width; 
     axis.append("text") 
      .text("Time") 
      .attr("dy", 30) 
      .attr("dx", width /2) 
      .attr("text-anchor","middle"); 
    }; 
    this.appendYlabel = function(){ 
     var axis = d3.select(".y.axis"); 
     var text = axis.append("text") 
      .text("FES"); 
     var tWidth = text.node().getComputedTextLength(); 
     text.attr("dy", 15) 
      .attr("dx", -tWidth) 
      .attr("text-anchor","start") 
      .attr("transform","rotate(-90)") 
      .text("FES"); 
    }; 

    this.appendY2label = function(){ 
     var axis = d3.select(".y2.axis"); 
     var text = axis.append("text") 
      .text("Fuel Consumption"); 
     var tWidth = text.node().getComputedTextLength(); 
     text.attr("dy", -15) 
      .attr("dx", -tWidth) 
      .attr("text-anchor","start") 
      .attr("transform","rotate(-90)") 
      .text("Fuel Consumption"); 
    };