Angularjs 向angular-nvd3中的点追加文本

我目前正在重新设计一些可视化，从R的静态嵌入式输出到使用angular-nvd3的交互式图形。我已经取得了相当大的进步，几乎完成了重新实施所有必要的选项

然而，我回避的最后一部分是找出如何向所有数据点添加持久性标签

虽然我为此定制了工具提示，但这是客户机要求将名称显示为切换的请求之一，因此我认为我无法回避

有没有一种内在的方法可以做到这一点？我在nvd3文档中找不到任何东西

我已经包含了来自的代码-我的代码非常具体，因此这将更容易使用。

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
 $scope.options = {
            chart: {
                type: 'scatterChart',
                height: 450,
                color: d3.scale.category10().range(),
                scatter: {
                    onlyCircles: false
                },
                showDistX: true,
                showDistY: true,
                tooltipContent: function(key) {
                    return '<h3>' + key + '</h3>';
                },
                duration: 350,
                xAxis: {
                    axisLabel: 'X Axis',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    }
                },
                yAxis: {
                    axisLabel: 'Y Axis',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: -5
                },
                zoom: {
                    //NOTE: All attributes below are optional
                    enabled: false,
                    scaleExtent: [1, 10],
                    useFixedDomain: false,
                    useNiceScale: false,
                    horizontalOff: false,
                    verticalOff: false,
                    unzoomEventType: 'dblclick.zoom'
                }
            }
        };

        $scope.data = generateData(4,40);

        /* Random Data Generator (took from nvd3.org) */
        function generateData(groups, points) {
            var data = [],
                shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
                random = d3.random.normal();

            for (var i = 0; i < groups; i++) {
                data.push({
                    key: 'Group ' + i,
                    values: []
                });

                for (var j = 0; j < points; j++) {
                    data[i].values.push({
                        x: random()
                        , y: random()
                        , size: Math.random()
                        , shape: shapes[j % 6]
                    });
                }
            }
            return data;
        }
});

var-app=angular.module（'plunker'，['nvd3']）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.options={
图表：{
类型：“散点图”，
身高：450，
颜色：d3.scale.category10（）.range（），
散布：{
仅限圆圈：false
},
showDistX：是的，
炫耀：没错，
ToolTicContent:函数（键）{
返回“”+键+“”；
},
持续时间：350，
xAxis：{
axisLabel:“X轴”，
格式：函数（d）{
返回d3.format（'.02f'）（d）；
}
},
亚克斯：{
axisLabel:“Y轴”，
格式：函数（d）{
返回d3.format（'.02f'）（d）；
},
轴间距：-5
},
缩放：{
//注意：下面的所有属性都是可选的
启用：false，
scaleExtent:[1,10]，
useFixedDomain:false，
useneciescale:false，
水平线：错误，
verticalOff:错误，
unzoomEventType:'dblclick.zoom'
}
}
};
$scope.data=generateData（4,40）；
/*随机数据发生器（取自nvd3.org）*/
函数生成数据（组、点）{
var数据=[]，
形状=[“圆形”、“十字形”、“三角形向上”、“三角形向下”、“菱形”、“正方形”]，
random=d3.random.normal（）；
对于（变量i=0；i<组；i++）{
数据推送({
键：'组'+i，
值：[]
});
对于（var j=0；j

根据您的要求，没有nvd3可以显示任何标签

但这可以通过混合少量d3来实现，如下所示：

  $scope.clear= function(){
    d3.selectAll(".label").remove();//will clear all the labels
  }
  $scope.showLabel= function(){
    $scope.clear();
    //for each path make label
    d3.selectAll(".nv-group path")[0].forEach(function(d){
          var tf = d3.select(d).attr("transform")
          t = d3.transform(tf).translate;
          t[0] = t[0] +10;//moving the translate x by 5 pixel.
          console.log(d3.select(d).data()[0])//data associated with the point
          d3.select(d.parentNode)
            .append("text")
            .attr("class", "label")
            .text("data: "+ d3.select(d).data()[0][1])//putting data
            .attr("transform", "translate("+t[0]+","+t[1]+")");/setting the changed translate for label

    });

  }

工作代码

---

希望这有帮助

您需要为要提供的名称设置数组。 检查此代码以进行交叉检查：

 for (var i = 0; i < groups; i++) {
                  var names = new Array ('London', 'Paris','New York','India');
                    data.push({
                        key: names[i],
                        values: []
                    });

for（变量i=0；i

App.js中的代码（已编辑）：

var-app=angular.module（'plunker'，['nvd3']）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.options={
图表：{
类型：“散点图”，
身高：450，
颜色：d3.scale.category10（）.range（），
散布：{
仅限圆圈：false
},
showDistX：是的，
炫耀：没错，
ToolTicContent:函数（键）{
返回“”+键+“”；
},
持续时间：350，
xAxis：{
axisLabel:“X轴”，
格式：函数（d）{
返回d3.format（'.02f'）（d）；
}
},
亚克斯：{
axisLabel:“Y轴”，
格式：函数（d）{
返回d3.format（'.02f'）（d）；
},
轴间距：-5
},
缩放：{
//注意：下面的所有属性都是可选的
启用：false，
scaleExtent:[1,10]，
useFixedDomain:false，
useneciescale:false，
水平线：错误，
verticalOff:错误，
unzoomEventType:'dblclick.zoom'
}
}
};
$scope.data=generateData（4,40）；
/*随机数据发生器（取自nvd3.org）*/
函数生成数据（组、点）{
var数据=[]，
形状=[“圆形”、“十字形”、“三角形向上”、“三角形向下”、“菱形”、“正方形”]，
random=d3.random.normal（）；
对于（变量i=0；i<组；i++）{
var name=新数组（“伦敦”、“巴黎”、“纽约”、“印度”）；
数据推送({
关键字：名称[i]，
值：[]
});
对于（var j=0；j

这太棒了，谢谢！：D（I

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
 $scope.options = {
            chart: {
                type: 'scatterChart',
                height: 450,
                color: d3.scale.category10().range(),
                scatter: {
                    onlyCircles: false
                },
                showDistX: true,
                showDistY: true,
                tooltipContent: function(key) {
                    return '<h3>' + key + '</h3>';
                },
                duration: 350,
                xAxis: {
                    axisLabel: 'X Axis',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    }
                },
                yAxis: {
                    axisLabel: 'Y Axis',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: -5
                },
                zoom: {
                    //NOTE: All attributes below are optional
                    enabled: false,
                    scaleExtent: [1, 10],
                    useFixedDomain: false,
                    useNiceScale: false,
                    horizontalOff: false,
                    verticalOff: false,
                    unzoomEventType: 'dblclick.zoom'
                }
            }
        };

        $scope.data = generateData(4,40);

        /* Random Data Generator (took from nvd3.org) */
        function generateData(groups, points) {
            var data = [],
                shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
                random = d3.random.normal();

            for (var i = 0; i < groups; i++) {
              var names = new Array ('London', 'Paris','New York','India');
                data.push({
                    key: names[i],
                    values: []
                });

                for (var j = 0; j < points; j++) {
                    data[i].values.push({
                        x: random()
                        , y: random()
                        , size: Math.random()
                        , shape: shapes[j % 6]
                    });
                }
            }
            return data;
        }
});