Question

我在d3js制作了一个条形图。

现在我需要选择某些＆＃34; rect＆＃34;具有给定类的元素，以便我可以将它们的高度缩小到0。

矩形看起来像：

<rect class="1c" width="7.523809523809524" height="73.33333333333333" x="677.1428571428571" y="366.6666666666667" style="fill: rgb(93, 147, 114);"></rect>

JQuery可以通过语句选择它：

$('.1c')

但是在尝试时

barchart.selectAll('.1c') //where barchat is the name of the chart created

或

d3.selectAll('.1c')

它给了我以下错误：

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '.1c' is not a valid selector.
at Error (native)
at xa (http://localhost:8080/prayaas.iiita.ac.in-server/js/d3.min.js:3:9972)
at SVGRectElement.<anonymous> (http://localhost:8080/prayaas.iiita.ac.in-server/js/d3.min.js:1:2295)
at Array._a.selectAll (http://localhost:8080/prayaas.iiita.ac.in-server/js/d3.min.js:3:10731)
at <anonymous>:2:10
at Object.InjectedScript._evaluateOn (<anonymous>:904:140)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:837:34)
at Object.InjectedScript.evaluate (<anonymous>:693:21)

如何选择具有给定类的所有元素以及如何将其高度降低到0？

根据要求，这是我的代码：

＆＃13;

    map = {};
data = "
[{"date":"2015-09-22","section":"2c","number":"4","names":"Abhinaya, Akshita Garg, Pooja Shukla, Shubham Utkarsh","timestamp":"2015-09-22 21:08:58"},{"date":"2015-09-22","section":"2b","number":"4","names":"Geetha Madhuri, Naveen Shukla, Pavitra, Vipul Agarwal","timestamp":"2015-09-22 21:08:58"},{"date":"2015-09-22","section":"1c","number":"4","names":"Abhishek Roy, Ashwin Tagde, Mudit Rathore, Rahul Agarwal, Rajkumar Gupta","timestamp":"2015-09-22 21:08:58"},{"date":"2015-09-22","section":"1b","number":"1","names":"Rameshwar Sankhala, Chaitanya Yadav","timestamp":"2015-09-22 21:08:58"},{"date":"2015-09-22","section":"1a","number":"5","names":"Dilip Kumar, Prajjawal Agarwal, Sandeep Kumar, Shashank Sharma, Shubhanshu Singh","timestamp":"2015-09-22 21:08:58"},{"date":"2015-09-21","section":"2b","number":"9","names":"Arpita Saha, Bharat Gupta, Kritika Sharma, Leetesh Meena, Naveen Shukla, Pavitra, Poojita Reddy, Rudraksha Gupta, Utkarsh Srivastava","timestamp":"2015-09-22 02:02:27"},{"date":"2015-09-21","section":"2a","number":"2","names":"Suresh Kumar, Vikas Kumar","timestamp":"2015-09-22 02:02:27"},{"date":"2015-09-21","section":"1c","number":"7","names":"Abhishek Roy, Ashutosh Chandra, Ashwin Tagde, Navneet Patel, Rahul Agarwal, Rajkumar Gupta, Somendra Agrawal","timestamp":"2015-09-22 02:02:27"},{"date":"2015-09-21","section":"1a","number":"11","names":"Dilip Kumar, M Diwakar, P Dinesh, Prajjawal Agarwal, Pranjul Tripathi, Ram Kishor, Ritika Motwani, Sakshi Singh, Sandeep Kumar, Shubhanshu Singh, Shyam Sundar","timestamp":"2015-09-22 02:02:27"},{"date":"2015-09-20","section":"2c","number":"4","names":"Akshita Garg, Laxmi Likhita, Pooja Shukla, Shivanshu Trivedi","timestamp":"2015-09-20 18:39:51"},{"date":"2015-09-20","section":"2b","number":"6","names":"Arpita Saha, Geetha Madhuri, Madhuri Soni, Poojita Reddy, Satyam Poddar, Vipul Agarwal","timestamp":"2015-09-20 18:39:51"},{"date":"2015-09-20","section":"2a","number":"6","names":"Akhil Betanabhotla, Dwarika Pandey, Sahil Hindwani, Shivendra Mittal, Suresh Kumar, Vikas Kumar","timestamp":"2015-09-20 18:39:51"},{"date":"2015-09-20","section":"1c","number":"4","names":"Aryan Modi, Ashutosh Chandra, Navneet Patel, Rajkumar Gupta","timestamp":"2015-09-20 18:39:51"},{"date":"2015-09-20","section":"1b","number":"1","names":"Rameshwar Sankhala","timestamp":"2015-09-20 18:39:51"},{"date":"2015-09-19","section":"2b","number":"4","names":"Kshitij Tripathi, Sarthak Sharma, Utkarsh Srivastava, Vipul Agarwal","timestamp":"2015-09-19 20:23:09"},{"date":"2015-09-19","section":"2a","number":"6","names":"Amit Vijay, Dwarika Pandey, Shivendra Mittal, Supriti Chaurasia, Suresh Kumar, Vikas Kumar","timestamp":"2015-09-19 20:23:09"},{"date":"2015-09-19","section":"1c","number":"1","names":"Rahul Agarwal","timestamp":"2015-09-19 20:23:09"},{"date":"2015-09-12","section":"2b","number":"1","names":"Vipul Agarwal","timestamp":"2015-09-12 18:39:53"},{"date":"2015-09-12","section":"2a","number":"6","names":"Akhil Betanabhotla, Aryan Gupta, Dwarika Pandey, Sahil Hindwani, Shivendra Mittal, Supriti Chaurasia","timestamp":"2015-09-12 18:39:53"},{"date":"2015-09-12","section":"1c","number":"4","names":"Abhishek Roy, Ashutosh Chandra, Rahul Agarwal, Rathod Veerender","timestamp":"2015-09-12 18:39:54"},{"date":"2015-09-12","section":"1b","number":"2","names":"Bhoopendra, Rameshwar Sankhala","timestamp":"2015-09-12 18:39:53"},{"date":"2015-09-12","section":"1a","number":"1","names":"Dilip Kumar","timestamp":"2015-09-12 18:39:53"},{"date":"2015-09-11","section":"2b","number":"3","names":"Leetesh Meena, Satyam Poddar, Vipul Agarwal","timestamp":"2015-09-11 18:46:26"},{"date":"2015-09-11","section":"2a","number":"9","names":"Anuska Jaiswal, Aryan Gupta, Dwarika Pandey, Ranju Panchariya, Sahil Hindwani, Shivendra Mittal, Supriti Chaurasia, Suresh Kumar, Vikas Kumar","timestamp":"2015-09-11 18:46:26"},{"date":"2015-09-11","section":"1c","number":"4","names":"Abhishek Roy, K Mahendar, Navneet Patel, Piyush Raj Meena","timestamp":"2015-09-11 18:46:26"},{"date":"2015-09-11","section":"1b","number":"4","names":"Anudeep Deepu, Bhoopendra, D Rohan Veera Rao, Rameshwar Sankhala","timestamp":"2015-09-11 18:46:26"},{"date":"2015-09-10","section":"2b","number":"5","names":"Bharat Gupta, Kshitij Tripathi, Naveen Shukla, Sarthak Sharma, Vipul Agarwal","timestamp":"2015-09-10 21:08:10"},{"date":"2015-09-10","section":"2a","number":"11","names":"Aryan Gupta, Dwarika Pandey, Nikhita, Preshita Chaudhary, Ranju Panchariya, Sahil Hindwani, Shivendra Mittal, Sree Devi, Supriti Chaurasia, Suresh Kumar, Vikas Kumar","timestamp":"2015-09-10 21:08:10"},{"date":"2015-09-10","section":"1c","number":"7","names":"Abhishek Roy, Ashutosh Chandra, Ishita, Navneet Patel, Rahul Agarwal, Sulekha, Vaishnavi","timestamp":"2015-09-10 21:08:10"},{"date":"2015-09-10","section":"1b","number":"3","names":"Anudeep Deepu, D Rohan Veera Rao, Rameshwar Sankhala","timestamp":"2015-09-10 21:08:10"},{"date":"2015-09-08","section":"2c","number":"4","names":"Laxmi Likhita, Rooha, Shivanshu Trivedi, Shubham Utkarsh","timestamp":"2015-09-08 23:56:54"},{"date":"2015-09-08","section":"2b","number":"15","names":"Arpita Saha, Anshul Anand, Bharat Gupta, Geetha Madhuri, Jatin Goel, Leetesh Meena, Nagendra, Naveen Shukla, Pavitra, Poojita Reddy, Rudraksha Gupta, Sarthak Sharma, Utkarsh Srivastava, Vartika Singh, Vipul Agarwal","timestamp":"2015-09-08 23:56:54"},{"date":"2015-09-08","section":"1c","number":"10","names":"Abhishek Roy, Ishita, K Mahendar, Navneet Patel, Rahul Agarwal, Sawai, Sonal Gupta, Sulekha, Vaishnavi, Rathod Veerender","timestamp":"2015-09-08 23:56:54"},{"date":"2015-09-08","section":"1b","number":"1","names":"Rameshwar Sankhala","timestamp":"2015-09-08 23:56:54"},{"date":"2015-09-08","section":"1a","number":"12","names":"Aditya Dewan, Dilip Kumar, Jayesh Chaudhari, M Diwakar, Meghna, Prajjawal Agarwal, Pranjul Tripathi, Ram Kishor, Sagar Kumar, Sandeep Kumar, Shubhanshu Singh, Tushar Murarka","timestamp":"2015-09-08 23:56:54"},{"date":"2015-09-07","section":"2b","number":"7","names":"Arpita Saha, Anshul Anand, Bharat Gupta, Pavitra, Rudraksha Gupta, Satyam Poddar, Vipul Agarwal","timestamp":"2015-09-08 00:19:00"},{"date":"2015-09-07","section":"2a","number":"3","names":"Akhil Betanabhotla, Shivendra Mittal, Suresh Kumar","timestamp":"2015-09-08 00:19:00"},{"date":"2015-09-07","section":"1c","number":"12","names":"Abhishek Roy, Aryan Modi, Ashwin Tagde, Ishita, Navneet Patel, Rahul Agarwal, Rajkumar Gupta, Sawai, Shubham Pal, Sonal Gupta, Sulekha, Vaishnavi","timestamp":"2015-09-08 00:19:00"},{"date":"2015-09-07","section":"1a","number":"5","names":"M Diwakar, Meghna, Radhika Chandak, Ram Kishor, Shubhanshu Singh","timestamp":"2015-09-08 00:19:00"},{"date":"2015-09-05","section":"2c","number":"1","names":"Pooja Shukla","timestamp":"2015-09-06 02:35:21"},{"date":"2015-09-05","section":"2b","number":"6","names":"Arpita Saha, Bharat Gupta, Naveen Shukla, Poojita Reddy, Satyam Poddar, Utkarsh Srivastava","timestamp":"2015-09-06 02:35:21"},{"date":"2015-09-05","section":"2a","number":"7","names":"Akhil Betanabhotla, Aryan Gupta, Sahil Hindwani, Shivendra Mittal, Supriti Chaurasia, Suresh Kumar, Vikas Kumar","timestamp":"2015-09-06 02:35:21"},{"date":"2015-09-05","section":"1c","number":"6","names":"Abhishek Roy, Ashutosh Chandra, K Mahendar, Rajkumar Gupta, Somendra Agrawal, Rathod Veerender","timestamp":"2015-09-06 02:35:21"},{"date":"2015-09-05","section":"1a","number":"3","names":"Boris Hembrom, Dilip Kumar, Ram Kishor","timestamp":"2015-09-06 02:35:21"},{"date":"2015-09-04","section":"2c","number":"2","names":"Pooja Shukla, Shubham Utkarsh","timestamp":"2015-09-05 03:58:27"},{"date":"2015-09-04","section":"2b","number":"3","names":"Jatin Goel, Naveen Shukla, Utkarsh Srivastava","timestamp":"2015-09-05 03:58:27"},{"date":"2015-09-04","section":"2a","number":"5","names":"Amit Vijay, Sahil Hindwani, Shivendra Mittal, Suresh Kumar, Vikas Kumar","timestamp":"2015-09-05 03:58:27"},{"date":"2015-09-04","section":"1c","number":"16","names":"Abhishek Roy, Aryan, Ashutosh Chandra, Ashwin Tagde, B Rajashekhar, Chandra Mauli, Govind Rajpurohit, K Mahendar, K Naveen, Navneet Patel, NS Sudheendra, Rahul Agarwal, Rajkumar Gupta, Shreerang Ajmire, Somendra Agrawal, Rathod Veerender","timestamp":"2015-09-05 03:58:27"},{"date":"2015-09-04","section":"1b","number":"1","names":"Deepak Kumar Yadav","timestamp":"2015-09-05 03:58:27"},{"date":"2015-09-04","section":"1a","number":"10","names":"Boris Hembrom, Kunal Gupta, Prajjawal Agarwal, Pranjul Tripathi, Ram Kishor, Rishabh Rai, Sagar Kumar, Shubhanshu Singh, Somya Verma, Vinay Pandey","timestamp":"2015-09-05 03:58:27"},{"date":"2015-09-03","section":"2c","number":"2","names":"Akshita Garg, Pooja Shukla","timestamp":"2015-09-03 19:37:07"},{"date":"2015-09-03","section":"2b","number":"4","names":"Arpita Saha, Naveen Shukla, Poojita Reddy, Utkarsh Srivastava","timestamp":"2015-09-03 19:37:07"},{"date":"2015-09-03","section":"2a","number":"13","names":"Akhil Betanabhotla, Anuska Jaiswal, Aryan Gupta, Dwarika Pandey, Nikhita, Preshita Chaudhary, Ranju Panchariya, Sahil Hindwani, Shivendra Mittal, Sree Devi, Supriti Chaurasia, Suresh Kumar, Vikas Kumar","timestamp":"2015-09-03 19:37:07"},{"date":"2015-09-03","section":"1c","number":"3","names":"Abhishek Roy, Navneet Patel, Rahul Agarwal","timestamp":"2015-09-03 19:37:07"},{"date":"2015-09-03","section":"1b","number":"1","names":"Anudeep Deepu","timestamp":"2015-09-03 19:37:07"},{"date":"2015-09-03","section":"1a","number":"7","names":"P Dinesh, Prajjawal Agarwal, Ram Kishor, Sagar Kumar, Shashank Sharma, Shubhanshu Singh, Shyam Sundar","timestamp":"2015-09-03 19:37:07"},{"date":"2015-09-01","section":"2b","number":"12","names":"Vipul Agarwal, Kshitij Tripathi, Naveen Shukla, Rudraksha Gupta, Sarthak Sharma, Bharat Gupta, Pavitra, Poojita Reddy, Geetha Madhuri, Leetesh Meena, Kritika Sharma, Arpita Saha","timestamp":"2015-09-01 18:30:07"},{"date":"2015-09-01","section":"2a","number":"4","names":"Shivendra Mittal, Vikas Kumar, Sahil Hindwani, Suresh Kumar","timestamp":"2015-09-01 18:30:07"},{"date":"2015-09-01","section":"1c","number":"4","names":"Abhishek Roy, Rajkumar Gupta, Navneet Patel, Rathod Veerender","timestamp":"2015-09-01 18:30:07"},{"date":"2015-09-01","section":"1a","number":"2","names":"Dilip Kumar, Prajjawal Agarwal","timestamp":"2015-09-01 18:30:07"},{"date":"2015-08-31","section":"2c","number":"2","names":"Pooja Shukla, Akshita Garg","timestamp":"2015-09-01 02:34:38"},{"date":"2015-08-31","section":"2b","number":"13","names":"Vipul Agarwal, Kshitij Tripathi, Utkarsh Srivastava, Naveen Shukla, Rudraksha Gupta, Sarthak Sharma, Satyam Poddar, Pavitra, Poojita Reddy, Leetesh Meena, Jatin Goel, Kritika Sharma, Arpita Saha","timestamp":"2015-09-01 02:34:38"},{"date":"2015-08-31","section":"2a","number":"1","names":"Suresh Kumar","timestamp":"2015-09-01 02:34:38"},{"date":"2015-08-31","section":"1c","number":"4","names":"Abhishek Roy, Rajkumar Gupta, Ashutosh Chandra, K Mahendar","timestamp":"2015-09-01 02:34:39"},{"date":"2015-08-31","section":"1a","number":"1","names":"Dilip Kumar","timestamp":"2015-09-01 02:34:39"},{"date":"2015-08-30","section":"2c","number":"6","names":"Pooja Shukla, Shivanshu Trivedi, Laxmi Likhita, Akshita Garg, Rooha, Vinita Meena","timestamp":"2015-08-30 18:32:26"},{"date":"2015-08-30","section":"2b","number":"3","names":"Vipul Agarwal, Utkarsh Srivastava, Poojita Reddy","timestamp":"2015-08-30 18:32:26"},{"date":"2015-08-30","section":"2a","number":"4","names":"Vikas Kumar, Suresh Kumar, Amit Vijay, Akhil Betanabhotla","timestamp":"2015-08-30 18:32:26"},{"date":"2015-08-30","section":"1c","number":"3","names":"Abhishek Roy, Navneet Patel, Rathod Veerender, Aryan Modi","timestamp":"2015-08-30 18:32:26"},{"date":"2015-08-30","section":"1a","number":"1","names":"Dilip Kumar, Divakar","timestamp":"2015-08-30 18:32:26"},{"date":"2015-08-28","section":"2b","number":"3","names":"Vipul Agarwal, Naveen Shukla, Sarthak Sharma","timestamp":"2015-08-28 23:48:16"},{"date":"2015-08-28","section":"2a","number":"3","names":"Vikas Kumar, Suresh Kumar, Akhil Betanabhotla","timestamp":"2015-08-28 23:48:16"},{"date":"2015-08-28","section":"1c","number":"1","names":"Abhishek Roy","timestamp":"2015-08-28 23:48:16"},{"date":"2015-08-27","section":"2a","number":"4","names":"Vikas Kumar, Suresh Kumar, Supriti Chaurasia, Akhil Betanabhotla","timestamp":"2015-08-27 19:24:45"},{"date":"2015-08-27","section":"1b","number":"2","names":"Anudeep Deepu, D Rohan Veera Rao","timestamp":"2015-08-27 19:24:45"},{"date":"2015-08-25","section":"2c","number":"5","names":"Pooja Shukla, Shivanshu Trivedi, Laxmi Likhita, Akshita Garg, Rooha","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-25","section":"1c","number":"8","names":"Abhishek Roy, Rajkumar Gupta, Navneet Patel, Ashutosh Chandra, K Mahendar, Rathod Veerender, Shreerang Ajmire, Shubhampal","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-25","section":"1a","number":"1","names":"Sagar Kumar","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-24","section":"2c","number":"1","names":"Shubham Utkarsh","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-24","section":"2b","number":"10","names":"Vipul Agarwal, Kshitij Tripathi, Naveen Shukla, Sarthak Sharma, Poojita Reddy, Madhuri Soni, Bharat Gupta, Kritika Sharma, Arpita Saha, Anshul Anand","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-24","section":"2a","number":"1","names":"Shivendra Mittal","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-24","section":"1c","number":"3","names":"Abhishek Roy, K Mahendar, Rathod Veerender","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-24","section":"1a","number":"7","names":"Sagar Kumar, Shubhanshu Singh, Rishabh Rai, Prajjawal Agarwal, Pranjul Tripathi, Ram Kishor, Jayesh Chaudhari","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-23","section":"2c","number":"2","names":"Pooja Shukla, Shivanshu Trivedi","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-23","section":"2b","number":"13","names":"Vipul Agarwal, Kshitij Tripathi, Utkarsh Srivastava, Naveen Shukla, Rudraksha Gupta, Sarthak Sharma, Poojita Reddy, Madhuri Soni, Geetha Madhuri, Jatin Goel, Bharat Gupta, Arpita Saha, Anshul Anand","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-23","section":"2a","number":"3","names":"Vikas Kumar, Suresh Kumar, Akhil Betanabhotla","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-23","section":"1c","number":"9","names":"Rajkumar Gupta, Navneet Patel, Ashutosh Chandra, K Mahendar, Rathod Veerender, K Naveen, NS Sudheendra, Shreerang Ajmire, Shubhampal","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-23","section":"1b","number":"3","names":"Pallavjeet, Nimish Dusad, Shreyansh Gupta","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-23","section":"1a","number":"12","names":"Sagar Kumar, Dilip Kumar, Shyam Sundar, P Dinesh, Prajjawal Agarwal, Aditya Dewan, Kunal Gupta, Deepak Kumar Yadav, Pranjul Tripathi, Sandeep Kumar Singh, Ram Kishor, Jayesh Chaudhari","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-22","section":"2c","number":"6","names":"Pooja Shukla, Shubham Utkarsh, Laxmi Likhita, Akshita Garg, Rooha, Abhinaya","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-22","section":"2b","number":"3","names":"Leetesh Meena, Jatin Goel, Kritika Sharma","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-22","section":"2a","number":"12","names":"Shivendra Mittal, Aryan Gupta, Vikas Kumar, Sahil Hindwani, Suresh Kumar, Sree Devi, Nikhita, Preshita Chaudhary, Ranju Panchariya, Anuska Jaiswal, Supriti Chaurasia, Akhil Betanabhotla","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-22","section":"1c","number":"9","names":"Abhishek Roy, Rajkumar Gupta, Navneet Patel, Ashutosh Chandra, K Mahendar, Rathod Veerender, K Naveen, Manikanta, Chandra Mauli","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-22","section":"1b","number":"3","names":"Rohan Verma, Anudeep Deepu, Pallavjeet","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-22","section":"1a","number":"6","names":"Somya Verma, Dilip Kumar, Shyam Sundar, P Dinesh, Shubhanshu Singh, Rishabh Rai","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-21","section":"2b","number":"2","names":"Utkarsh Srivastava, Vartika Singh","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-21","section":"2a","number":"13","names":"Shivendra Mittal, Aryan Gupta, Vikas Kumar, Sahil Hindwani, Suresh Kumar, Dwarika Pandey, Amit Vijay, Sree Devi, Nikhita, Ranju Panchariya, Anuska Jaiswal, Supriti Chaurasia, Akhil Betanabhotla","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-21","section":"1c","number":"9","names":"Abhishek Roy, Rajkumar Gupta, Navneet Patel, K Mahendar, Rathod Veerender, K Naveen, NS Sudheendra, Manikanta, Chandra Mauli","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-20","section":"2a","number":"10","names":"Shivendra Mittal, Aryan Gupta, Vikas Kumar, Sahil Hindwani, Suresh Kumar, Dwarika Pandey, Preshita Chaudhary, Ranju Panchariya, Anuska Jaiswal, Supriti Chaurasia","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-20","section":"1a","number":"1","names":"Sagar Kumar","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-18","section":"2c","number":"3","names":"Pooja Shukla, Ravi Shankar, Akshita Garg","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-18","section":"2b","number":"9","names":"Vipul Agarwal, Kshitij Tripathi, Utkarsh Srivastava, Satyam Poddar, Pavitra, Madhuri Soni, Geetha Madhuri, Jatin Goel, Bharat Gupta, Arpita Saha","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-17","section":"2b","number":"11","names":"Vipul Agarwal, Utkarsh Srivastava, Naveen Shukla, Rudraksha Gupta, Satyam Poddar, Pavitra, Poojita Reddy, Vartika Singh, Geetha Madhuri, Jatin Goel, Bharat Gupta","timestamp":"2015-08-26 17:21:14"},{"date":"2015-08-17","section":"2a","number":"1","names":"Vikas Kumar","timestamp":"2015-08-26 17:21:14"}]"
data = jQuery.parseJSON(data);  //convert JSON to array
for (var i = 0; i < data.length; i++) {
  var names = data[i].names.split(', '); //split the CSVs
  for (var j = 0; j < names.length; j++) {
    names[j] = names[j].trim() + '(' + data[i].section + ')';
    map[names[j]] = (map[names[j]] || 0) + 1;
  }
//console.log(map);
}
console.log(map);

var sortable = [];
for (var name in map) {
  sortable.push([name, map[name]])
}
sortable.sort(function(a, b) {return a[0].localeCompare(b[0])})
console.log(sortable);

BarChart();



function BarChart() {

  // var bardata = [2, 150, 30, 45, 15, 45, 30, 45, 15, 45, 30, 45, 15, 50, 55, 80, 100, 150, 20, 150, 30, 45, 15, 45, 30, 45, 15, 50, 55, 80, 100, 150];
  var margin = {top: 30, right: 30, bottom: 30, left: 30};
  var height = 500 - margin.top - margin.bottom,
      width = 850 - margin.left - margin.right,
      barWidth = 30,
      barOffset = 5;



  var yScale = d3.scale.linear()
                .domain([0, d3.max(sortable, function(d) {
                  return d[1];
                })])
                .range([0, height]);

  var xScale = d3.scale.ordinal()
                .domain(d3.range(0, sortable.length))
                .rangeBands([0, width], 0);


  var colors = d3.scale.linear()
                  .domain([0, sortable.length * .33, sortable.length * .66, sortable.length])
                  .range(['#B58929', '#C61C6F', '#268BD2', '#85992C']);

  var tooltip = d3.select('body').append('div')
                  .attr('class', 'bc-tooltip');

  barchart = d3.select('#bc-visual').append('svg')
      .attr('id', 'bc-chart')
      .attr('width', margin.left + width + margin.right)
      .attr('height', margin.top + height + margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.right + ')')
      .style('background', '#C9D7D6')
      .selectAll('rect').data(sortable)
      .enter().append('rect')
      .style('fill', function(d, i) {
        return colors(i);
      })
      .attr('class', function(d, i) {
        return d[0].substring(d[0].length - 3, d[0].length - 1);
      })
      .attr('width', xScale.rangeBand())
      .attr('height', 0)
      .attr('x', function(d, i) {
        return xScale(i);
      })
      .attr('y', height)
      .on('mouseover', function(d) {
        tooltip.transition()
          .style('opacity', .9);
        tooltip.html(d)
          .style('left', (d3.event.pageX) + 'px')
          .style('top', (d3.event.pageY) + 'px');
      });
      // .attr('width', xScale.rangeBand())
      // .attr('height', function(d) {
      //   return yScale(d);
      // })
      // .attr('x', function(d, i) {
      //   return xScale(i);
      // })
      // .attr('y', function(d) {
      //   return height - yScale(d);
      // });

  barchart.transition()
    .attr('height', function(d) {
      return yScale(d[1]);
    })
    .attr('y', function(d) {
      return height - yScale(d[1]);
    })
    .delay(function(d, i) {
      return i * 10;
    });

  var vAxis = d3.svg.axis()
                .scale(yScale)
                .orient('left')
                .ticks(10);

  var vGuide = d3.select('#bc-chart').append('g')
      vAxis(vGuide)
      vGuide.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
      vGuide.selectAll('path')
            .style({fill: 'none', stroke: '#000'})
      vGuide.selectAll('line')
            .style({stroke: '#000'});

  var vGuideScale = d3.scale.linear()
      .domain([0, d3.max(sortable, function(d) {
        return d[1];
      })])
      .range([height, 0]);

  var hAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom')
                .tickValues(xScale.domain().filter(function(d, i) {
                  return !(i % 10);
                }));

  var hGuide = d3.select('#bc-chart').append('g')
      hAxis(hGuide)
      hGuide.attr('transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')')
      hGuide.selectAll('path')
            .style({fill: 'none', stroke: '#000'})
      hGuide.selectAll('line')
            .style({stroke: '#000'});

  $(".bc-cb").change(function() {
    if(this.checked) {
        var cbclass = (event.target.id).substring(3, 5);
        barchart.selectAll('rect.' + cbclas)
          .transition()
          .attr('height', 0);

    } else {

    }
  });
}

＆＃13;

  .hidden {
    display: none;
  }

  #bc-visual {
    /*left: 50px;*/
    position: relative;
    padding: 10px;
  }

  .bc-tooltip {
    position: absolute;
    padding: 2px 10px;
    background: white;
    opacity: 0;
    border-radius: 2px;
  }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="date" name="" id="form-date">
    <input type="text" name="" id="name">
    <input type="date" name="" id="to-date">
    <span>
      <input type="checkbox" class="bc-cb" id="bc-1a">1a</checkbox>
      <input type="checkbox" class="bc-cb" id="bc-1b">1b</checkbox>
      <input type="checkbox" class="bc-cb" id="bc-1c">1c</checkbox>
      <input type="checkbox" class="bc-cb" id="bc-2a">2a</checkbox>
      <input type="checkbox" class="bc-cb" id="bc-2b">2b</checkbox>
      <input type="checkbox" class="bc-cb" id="bc-2c">2c</checkbox>
    </span>
  <!-- </form> -->
  <div id="bc-visual">
    <!-- <svg id="visualisation" width="1000" height="500"></svg> -->
  </div>

＆＃13;

Answer 1

css类的名称有一些明确的规则check this stack overflow question - 类名必须以名称开头，必须以下划线（_），连字符（ - ）或字母（a-z）开头。将名称从“1c”更改为不以数字开头的内容，它应该可以正常工作。该演示位于this plnkr。

d3.select("body").append("svg").attr("width", 400).attr("height", 110).append("rect").attr("class","abcc")

您需要使用“。”附加类名称。无论何时你想在d3中做出选择。请参阅working code here.

已编辑：

无法在d3js中选择具有特定类的基元

1 个答案: