将文本附加到 angular-nvd3 中的点

Question

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

然而，最后一个让我逃避的部分是弄清楚如何为所有数据点添加持久性标签。

虽然我为此自定义了工具提示，但这是客户要求将名称显示为切换按钮的请求之一，因此我认为我无法绕过它。

是否有内置方法可以做到这一点？我在 nvd3 文档中找不到任何东西。

我已经包含了 reference scatter plot example 中的代码 - 我的代码非常具体，因此使用起来会更容易。

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;
        }
});

Answer 1

No 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

    });

  }

工作代码here

希望对您有所帮助！

Answer 2

您需要数组来存储您要提供的名称。 检查此代码以进行交叉检查：

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

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

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;
        }
});