无法使用Ember.js过滤图表

时间:2015-11-10 15:28:00

标签: javascript ember.js d3.js ember-cli

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 Chart。

我该怎么办?

这是完整的JSBin:

http://emberjs.jsbin.com/gekipacewe/edit?html,js,output

1 个答案:

答案 0 :(得分:0)

基本上,您需要为select创建一个组数组,然后创建一个计算属性,该属性会对所选值的更改做出反应,从而对整个值集进行过滤。这是一个有效的jsbin