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我稍微改进了你的建议，所以它适用于resize事件，如果我有两个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图表

2 个答案: