d3js栏没有正确更新

时间:2017-07-08 07:30:02

标签: d3.js

我用工具提示创建了这个栏。我需要在<!DOCTYPE html> <html> <head> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="myApp" ng-controller="AppCtrl"> <div ng-repeat ="listitem in list"> <label> {{ listitem.pageName }} </label> <input type="checkbox" ng-model="listitem.isSelected" > </div> <button ng-click="getselected()">getSelected</button> <h1>selected ones{{newList}}</h1> </div> </body> </html>

之后更新它们

我没有收到任何错误但没有更新......

$('.quarter-increase, .quarter-decrease').on('click', function() {

这是一个测试这个的Plunker: https://plnkr.co/edit/72GCWqkllMFXZI6mecQE?p=preview

按“显示”,然后将年份更改为2016,您将看到结果。

1 个答案:

答案 0 :(得分:1)

点击事件处理程序中的g变量是新添加的<group>元素。

因此,这......

g.selectAll(".bar").data(data).etc...

...不会工作,因为该组内没有类.bar

解决方案:使用svg变量选择矩形:

svg.selectAll(".bar").data(data).etc...

以下是更新的plunker:https://plnkr.co/edit/eNa6Af0WcyrcLejadO2q?p=preview

PS:此代码有几个问题。我强烈建议你不要混淆jQuery和D3,也不要在事件处理程序中使用d3.csv