如何将 axesLables 添加到 n3-charts

Question

我正在使用 n3-charts 在基于 angular 的网页上显示图表。一切正常，但我找不到向轴添加标签的简单方法。我错过了什么吗？通常会在其中添加时间单位或百分比等内容。

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

谢谢马克，我对您的建议进行了一些改进，因此它适用于调整大小事件并且如果我有两个 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");
    };

如何将 axesLables 添加到 n3-charts

how to add axesLables to n3-charts

d3.js

angularjs-directive