无法使用Ember.js过滤图表

Question

 App = Ember.Application.create(); App.IndexRoute = Ember.Route.extend({ controllerName: 'application' }); App.ApplicationController = Ember.Controller.extend({ // Used only for scatter chart scatterContent: [ { "group": "C/N_{bio}", "xValue": 1, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 2, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 3, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 4, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 5, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 6, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 7, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 8, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 9, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 10, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 11, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 12, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 13, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 14, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 15, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 16, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 17, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 18, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 19, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 20, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 21, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 22, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 23, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 24, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 25, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 26, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 27, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 28, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 29, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 30, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 31, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 32, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 33, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 34, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 35, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 36, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 37, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 38, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 39, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 40, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 41, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 42, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 43, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 44, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 45, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 46, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 47, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 48, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 49, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 50, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 51, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 52, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 53, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 54, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 55, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 56, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 57, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 58, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 59, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 60, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 61, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 62, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 63, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 64, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 65, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 66, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 67, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 68, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 69, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 70, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 71, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 72, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 73, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 74, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 75, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 76, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 77, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 78, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 79, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 80, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 81, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 82, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 83, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 84, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 85, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 86, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 87, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 88, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 89, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 90, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 91, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 92, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 93, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 94, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 95, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 96, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 97, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 98, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 99, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 100, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 101, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 102, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 103, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 104, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 105, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 106, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 107, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 108, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 109, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 110, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 111, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 112, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 113, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 114, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 115, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 116, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 117, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 118, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 119, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 120, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 121, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 122, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 123, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 124, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 125, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 126, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 127, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 128, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 129, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 130, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 131, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 132, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 133, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 134, "yValue": 14.0833 }, { "group": "C/N_{bio}", "xValue": 135, "yValue": 14.0833 }, { "group": "Cbio", "xValue": 1, "yValue": 21.9749 }, { "group": "Cbio", "xValue": 2, "yValue": 44.0435 }, { "group": "Cbio", "xValue": 3, "yValue": 49.045 }, { "group": "Cbio", "xValue": 4, "yValue": 53.7059 }, { "group": "Cbio", "xValue": 5, "yValue": 73.2942 }, { "group": "Cbio", "xValue": 6, "yValue": 76.8319 }, { "group": "Cbio", "xValue": 7, "yValue": 79.9969 }, { "group": "Cbio", "xValue": 8, "yValue": 93.9236 }, { "group": "Cbio", "xValue": 9, "yValue": 96.4507 }, { "group": "Cbio", "xValue": 10, "yValue": 110.044 }, { "group": "Cbio", "xValue": 11, "yValue": 122.781 }, { "group": "Cbio", "xValue": 12, "yValue": 134.265 }, { "group": "Cbio", "xValue": 13, "yValue": 143.709 }, { "group": "Cbio", "xValue": 14, "yValue": 153.27 }, { "group": "Cbio", "xValue": 15, "yValue": 161.919 }, { "group": "Cbio", "xValue": 16, "yValue": 170.07 }, { "group": "Cbio", "xValue": 17, "yValue": 176.566 }, { "group": "Cbio", "xValue": 18, "yValue": 181.429 }, { "group": "Cbio", "xValue": 19, "yValue": 185.634 }, { "group": "Cbio", "xValue": 20, "yValue": 189.318 }, { "group": "Cbio", "xValue": 21, "yValue": 191.987 }, { "group": "Cbio", "xValue": 22, "yValue": 193.868 }, { "group": "Cbio", "xValue": 23, "yValue": 195.258 }, { "group": "Cbio", "xValue": 24, "yValue": 196.4 }, { "group": "Cbio", "xValue": 25, "yValue": 197.308 }, { "group": "Cbio", "xValue": 26, "yValue": 197.873 }, { "group": "Cbio", "xValue": 27, "yValue": 198.059 }, { "group": "Cbio", "xValue": 28, "yValue": 197.973 }, { "group": "Cbio", "xValue": 29, "yValue": 197.716 }, { "group": "Cbio", "xValue": 30, "yValue": 197.343 }, { "group": "Cbio", "xValue": 31, "yValue": 196.853 }, { "group": "Cbio", "xValue": 32, "yValue": 196.211 }, { "group": "Cbio", "xValue": 33, "yValue": 195.471 }, { "group": "Cbio", "xValue": 34, "yValue": 194.576 }, { "group": "Cbio", "xValue": 35, "yValue": 193.561 }, { "group": "Cbio", "xValue": 36, "yValue": 192.434 }, { "group": "Cbio", "xValue": 37, "yValue": 191.253 }, { "group": "Cbio", "xValue": 38, "yValue": 189.902 }, { "group": "Cbio", "xValue": 39, "yValue": 188.338 }, { "group": "Cbio", "xValue": 40, "yValue": 186.613 }, { "group": "Cbio", "xValue": 41, "yValue": 184.75 }, { "group": "Cbio", "xValue": 42, "yValue": 182.714 }, { "group": "Cbio", "xValue": 43, "yValue": 180.553 }, { "group": "Cbio", "xValue": 44, "yValue": 178.43 }, { "group": "Cbio", "xValue": 45, "yValue": 176.249 }, { "group": "Cbio", "xValue": 46, "yValue": 174.113 }, { "group": "Cbio", "xValue": 47, "yValue": 171.904 }, { "group": "Cbio", "xValue": 48, "yValue": 169.659 }, { "group": "Cbio", "xValue": 49, "yValue": 167.583 }, { "group": "Cbio", "xValue": 50, "yValue": 165.626 }, { "group": "Cbio", "xValue": 51, "yValue": 163.811 }, { "group": "Cbio", "xValue": 52, "yValue": 162.072 }, { "group": "Cbio", "xValue": 53, "yValue": 160.358 }, { "group": "Cbio", "xValue": 54, "yValue": 158.545 }, { "group": "Cbio", "xValue": 55, "yValue": 156.907 }, { "group": "Cbio", "xValue": 56, "yValue": 155.233 }, { "group": "Cbio", "xValue": 57, "yValue": 153.606 }, { "group": "Cbio", "xValue": 58, "yValue": 151.94 }, { "group": "Cbio", "xValue": 59, "yValue": 150.278 }, { "group": "Cbio", "xValue": 60, "yValue": 148.59 }, { "group": "Cbio", "xValue": 61, "yValue": 146.804 }, { "group": "Cbio", "xValue": 62, "yValue": 145.027 }, { "group": "Cbio", "xValue": 63, "yValue": 143.295 }, { "group": "Cbio", "xValue": 64, "yValue": 141.332 }, { "group": "Cbio", "xValue": 65, "yValue": 139.567 }, { "group": "Cbio", "xValue": 66, "yValue": 137.699 }, { "group": "Cbio", "xValue": 67, "yValue": 135.895 }, { "group": "Cbio", "xValue": 68, "yValue": 134.149 }, { "group": "Cbio", "xValue": 69, "yValue": 132.428 }, { "group": "Cbio", "xValue": 70, "yValue": 130.667 }, { "group": "Cbio", "xValue": 71, "yValue": 128.977 }, { "group": "Cbio", "xValue": 72, "yValue": 127.353 }, { "group": "Cbio", "xValue": 73, "yValue": 125.74 }, { "group": "Cbio", "xValue": 74, "yValue": 124.161 }, { "group": "Cbio", "xValue": 75, "yValue": 122.53 }, { "group": "Cbio", "xValue": 76, "yValue": 120.916 }, { "group": "Cbio", "xValue": 77, "yValue": 119.382 }, { "group": "Cbio", "xValue": 78, "yValue": 117.857 }, { "group": "Cbio", "xValue": 79, "yValue": 115.752 }, { "group": "Cbio", "xValue": 80, "yValue": 113.854 }, { "group": "Cbio", "xValue": 81, "yValue": 111.431 }, { "group": "Cbio", "xValue": 82, "yValue": 109.272 }, { "group": "Cbio", "xValue": 83, "yValue": 107.396 }, { "group": "Cbio", "xValue": 84, "yValue": 105.616 }, { "group": "Cbio", "xValue": 85, "yValue": 103.877 }, { "group": "Cbio", "xValue": 86, "yValue": 101.656 }, { "group": "Cbio", "xValue": 87, "yValue": 99.7141 }, { "group": "Cbio", "xValue": 88, "yValue": 97.9869 }, { "group": "Cbio", "xValue": 89, "yValue": 96.4857 }, { "group": "Cbio", "xValue": 90, "yValue": 95.0628 }, { "group": "Cbio", "xValue": 91, "yValue": 93.8133 }, { "group": "Cbio", "xValue": 92, "yValue": 92.6346 }, { "group": "Cbio", "xValue": 93, "yValue": 91.3889 }, { "group": "Cbio", "xValue": 94, "yValue": 90.2382 }, { "group": "Cbio", "xValue": 95, "yValue": 89.1427 }, { "group": "Cbio", "xValue": 96, "yValue": 88.1535 }, { "group": "Cbio", "xValue": 97, "yValue": 87.2294 }, { "group": "Cbio", "xValue": 98, "yValue": 86.3176 }, { "group": "Cbio", "xValue": 99, "yValue": 85.4533 }, { "group": "Cbio", "xValue": 100, "yValue": 84.6878 }, { "group": "Cbio", "xValue": 101, "yValue": 83.9736 }, { "group": "Cbio", "xValue": 102, "yValue": 83.3286 }, { "group": "Cbio", "xValue": 103, "yValue": 82.7016 }, { "group": "Cbio", "xValue": 104, "yValue": 82.1133 }, { "group": "Cbio", "xValue": 105, "yValue": 81.5279 }, { "group": "Cbio", "xValue": 106, "yValue": 80.9748 }, { "group": "Cbio", "xValue": 107, "yValue": 80.3806 }, { "group": "Cbio", "xValue": 108, "yValue": 79.7843 }, { "group": "Cbio", "xValue": 109, "yValue": 79.1017 }, { "group": "Cbio", "xValue": 110, "yValue": 78.4586 }, { "group": "Cbio", "xValue": 111, "yValue": 77.8438 }, { "group": "Cbio", "xValue": 112, "yValue": 77.2701 }, { "group": "Cbio", "xValue": 113, "yValue": 76.6897 }, { "group": "Cbio", "xValue": 114, "yValue": 76.1497 }, { "group": "Cbio", "xValue": 115, "yValue": 75.6211 }, { "group": "Cbio", "xValue": 116, "yValue": 75.1019 }, { "group": "Cbio", "xValue": 117, "yValue": 74.568 }, { "group": "Cbio", "xValue": 118, "yValue": 74.0623 }, { "group": "Cbio", "xValue": 119, "yValue": 73.5618 }, { "group": "Cbio", "xValue": 120, "yValue": 72.9726 }, { "group": "Cbio", "xValue": 121, "yValue": 72.4426 }, { "group": "Cbio", "xValue": 122, "yValue": 71.9327 }, { "group": "Cbio", "xValue": 123, "yValue": 71.4166 }, { "group": "Cbio", "xValue": 124, "yValue": 70.8986 }, { "group": "Cbio", "xValue": 125, "yValue": 70.3609 }, { "group": "Cbio", "xValue": 126, "yValue": 69.8004 }, { "group": "Cbio", "xValue": 127, "yValue": 69.2476 }, { "group": "Cbio", "xValue": 128, "yValue": 68.6887 }, { "group": "Cbio", "xValue": 129, "yValue": 68.1583 }, { "group": "Cbio", "xValue": 130, "yValue": 67.6935 }, { "group": "Cbio", "xValue": 131, "yValue": 67.2533 }, { "group": "Cbio", "xValue": 132, "yValue": 66.7951 }, { "group": "Cbio", "xValue": 133, "yValue": 66.3106 }, { "group": "Cbio", "xValue": 134, "yValue": 65.8548 }, { "group": "Cbio", "xValue": 135, "yValue": 65.3811 } ] }); 

 <!DOCTYPE html> <html> <head> <meta name="description" content="Ember-Charts Starter Kit" /> <meta charset="utf-8"> <title>Ember Charts Starter Kit</title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css"> <link rel="stylesheet" href="http://rawgit.com/Addepar/ember-charts/v0.3.0/dist/ember-charts.css"> <!-- Ember and dependencies --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script> <script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script> <!-- Ember Charts and dependencies --> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script> <script src="http://rawgit.com/Addepar/ember-charts/v0.3.0/dist/ember-charts.js"></script> </head> <body> <script type="text/x-handlebars"> <h2> Welcome to Ember Charts!</h2> <p>Version 0.3.0</p> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> {{view Ember.Select content=scatterContent value=selectedGroup placeholder="All" }} <div class="chart-container"> {{scatter-chart data=scatterContent xValueDisplayName="Time" yValueDisplayName="Return" }} </div> </div> </script> </body> </html> 

我想过滤图表，但不起作用。

目标是通过使用SelectBox显示D3图表的每个“组”。

我能怎么做 ？

这是完整的JSBin：

http://emberjs.jsbin.com/gekipacewe/edit?html,js，输出

Answer 1

基本上，您需要为select创建一个组数组，然后创建一个对所选值的变化做出反应的计算属性，从而对整个值集进行过滤。 这是一个工作的jsbin