1

我目前正在重新设计一些可视化，从 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;
        }
});
4

2 回答 2

1

没有 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

    });

  }

工作代码在这里

希望这可以帮助！

于 2015-12-15T07:03:30.620 回答
0

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

 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;
        }
});
于 2015-12-15T07:03:52.443 回答