根据用户输入单选按钮更新 NVD3 /D3 图表

Question

http://nvd3.org/examples/cumulativeLine.html

此示例显示 4 个折线图。我想在下面实现什么。

目前，系列 1、系列 2、系列 3、系列 4（图表和相应的图例）

我想让系列 1、系列 2、系列 3 保持通用

而且我有几个单选按钮（图表区域外），例如系列 5、系列 6、系列 7 等等。

现在点击那些单选按钮，我想显示相应的图表和常用图表（在本例中为系列 1、2 和 3）

例如 已单击系列 5 单选按钮 现在显示系列 1、系列 2、系列 3、系列 5，[这将删除 chart3 legend-chart 并添加 Series 5 的 legend-chart]。

我试图在 AngularJS 和 NVD3 指令中实现上述目标。但是我很好，我知道 D3 代码逻辑，我应该能够更改为角度方式。热烈欢迎提供 Angular 工作。

[更新]

奇怪，我用简单的折线图代替了累积。我更改了数据，并且图表正在按预期更新。我不知道累积有什么问题。有什么想法吗？

Answer 1

使用 angularjs 你可以试试angular-nvd3 指令。它允许您通过 JSON 操作图表数据和图表选项，例如：

//html
<nvd3 options="options" data="data"></nvd3>

//javascript
$scope.options = { /*some options*/ }
$scope.data = [ /*some data*/ ]

因此，在您的情况下，我们只是将这种方法扩展到我们以交互方式更新数据时。我们可以这样写（使用复选框）：

//html
<div ng-repeat="series in initData">
    <input type="checkbox" ng-model="checkboxes[series.key]" ng-init="checkboxes[series.key]=true" ng-change="onchange()"/>{{series.key}}
</div>
<nvd3 options="options" data="data"></nvd3>

其中initData 是一个完整的静态数据集。在控制器中

//javascript
$scope.options = { /*some options*/ }
$scope.initData = [
        {
            key: "Long",
            mean: 250,
            values: [ ... ]
        }, 
        ...
];
$scope.data = angular.copy($scope.initData);        
$scope.checkboxes = {};        
$scope.onchange = function(){
    $scope.data = [];
    angular.forEach($scope.initData, function(value, index){
        if ($scope.checkboxes[value.key]) $scope.data.push(value);
    })
}

查看实时示例：http://plnkr.co/edit/ZLcS6M?p=preview

Answer 2

注意：angular-nvd3

http://embed.plnkr.co/tsJntqq5YJnNUGK6goLZ/preview

请参阅 plunkr，我为一个按钮添加了一个新系列，所以它不应该有太大的不同，只是为收音机改变。请注意，如果您从 Web 服务或类似资源中获取数据，您可能需要重新绘制图表

见https://github.com/krispo/angular-nvd3/issues/37

在指令中 <nvd3 options="options" data="data" api="api"></nvd3>

在控制器中 $scope.api.refresh();

希望有帮助