如何复制此 nvd3 图表标题 styling/positioning 行为？

Question

我正在接管一个使用 Angular-nvD3 绘制饼图的网站，当我在本地构建该网站时，标题显示不正确。

这是我在本地构建网站时的样子...

代码将字符串数组输入图表 object 的 'options' object 上的 'title' 属性。工作站点为此数组中的每个字符串创建了单独的行，但本地站点只是将字符串连接成一行。

我已确保所有依赖项都在同一版本上。我已经浏览了 nvd3 和 angular-nvd3 的所有文档，但找不到任何将标题作为数组的引用。

所以问题是是否可以像 existing website 那样将标题设置为自动换行？

代码...

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

app.controller('MainCtrl', function($scope) {
$scope.options = {
    chart: {
        type: 'pieChart',
        height: 500,
        x: function(d){return d.key;},
        y: function(d){return d.y;},
        showLabels: true,
        donutRatio: .55,
        showLegend: false,
        duration: 500,
        donut: true,
        labelsOutside: true,
        labelThreshold: 0.01,
        labelSunbeamLayout: true,
        title:['KOSTNADSSPLITT','(OPPVASKPROSESSEN)'],
        legend: {
            margin: {
                top: 5,
                right: 35,
                bottom: 5,
                left: 0
            }
        }
    }
};

$scope.data = [
    {
        key: "One",
        y: 5
    },
    {
        key: "Two",
        y: 2
    },
    {
        key: "Three",
        y: 9
    },
    {
        key: "Four",
        y: 7
    },
    {
        key: "Five",
        y: 4
    },
    {
        key: "Six",
        y: 3
    },
    {
        key: "Seven",
        y: .5
    }
];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet"/>
<div ng-app="d3app">
  <div ng-controller="MainCtrl">
    <nvd3 options="options" data="data"></nvd3> 
  </div>
</div>

Answer 1

正如 jeznag 所指出的，该站点的 Bower 依赖项之一（Angular Material 设计）的代码已被手动更改。所以这不是错误或一般问题。

如何复制此 nvd3 图表标题 styling/positioning 行为？

How can I replicate this nvd3 chart title styling/positioning behaviour?

d3.js

nvd3.js

angular-nvd3