reactjs - 使用 D3 比较直方图进行颜色渐变
问题描述
编辑：由于大小，可能最容易全屏查看代码段。此外，使用按钮查看每个条的实际颜色是什么，这可能会有所帮助。
我正在处理 D3 中的交互式比较直方图，但是我正在努力适当地设置颜色。到目前为止，请参阅下面的内容。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedName: 'none'
}
this.chartProps = {
myLightGrey: '#EEE',
myMidGrey: '#888',
myDarkGrey: '#333',
chartWidth: 800, // Dont Change These, For Viewbox
chartHeight: 480, // Dont Change These, For Viewbox
padding: 80,
margin: {top: 20, right: 20, bottom: 30, left: 40},
logoRadius: 800 / 36,
svgID: "nbaStatHistograms"
};
}
// Helper Functions
generateStatData() {
var data = [{"Pos":"PG","teamAbb":"GSW","PTS":37,"REB":6,"AST":3,"STL":0,"BLK":0,"TOV":2,"X3PM":6,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":29,"REB":13,"AST":3,"STL":1,"BLK":3,"TOV":6,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":14,"REB":2,"AST":1,"STL":0,"BLK":1,"TOV":0,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":29,"REB":2,"AST":8,"STL":4,"BLK":0,"TOV":6,"X3PM":2,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":25,"REB":8,"AST":6,"STL":0,"BLK":1,"TOV":2,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":21,"REB":4,"AST":3,"STL":0,"BLK":1,"TOV":2,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":30,"REB":4,"AST":5,"STL":3,"BLK":1,"TOV":2,"X3PM":4,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":29,"REB":4,"AST":5,"STL":1,"BLK":0,"TOV":1,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":22,"REB":8,"AST":5,"STL":1,"BLK":1,"TOV":4,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":20,"REB":5,"AST":8,"STL":2,"BLK":0,"TOV":2,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":31,"REB":11,"AST":6,"STL":1,"BLK":2,"TOV":4,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":18,"REB":2,"AST":3,"STL":0,"BLK":2,"TOV":1,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":27,"REB":6,"AST":8,"STL":1,"BLK":0,"TOV":5,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":28,"REB":6,"AST":4,"STL":0,"BLK":2,"TOV":3,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":29,"REB":2,"AST":0,"STL":2,"BLK":0,"TOV":4,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":31,"REB":5,"AST":6,"STL":2,"BLK":1,"TOV":1,"X3PM":7,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":19,"REB":7,"AST":4,"STL":0,"BLK":0,"TOV":1,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":15,"REB":5,"AST":6,"STL":0,"BLK":0,"TOV":3,"X3PM":1,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":21,"REB":8,"AST":4,"STL":3,"BLK":0,"TOV":2,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":24,"REB":8,"AST":5,"STL":0,"BLK":3,"TOV":2,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":27,"REB":3,"AST":2,"STL":0,"BLK":1,"TOV":1,"X3PM":5,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":22,"REB":0,"AST":11,"STL":2,"BLK":0,"TOV":3,"X3PM":5,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":25,"REB":7,"AST":7,"STL":0,"BLK":2,"TOV":4,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":15,"REB":2,"AST":2,"STL":1,"BLK":0,"TOV":2,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":16,"REB":5,"AST":4,"STL":2,"BLK":0,"TOV":1,"X3PM":2,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":21,"REB":8,"AST":6,"STL":1,"BLK":3,"TOV":1,"X3PM":1,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":13,"REB":6,"AST":2,"STL":1,"BLK":2,"TOV":2,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":22,"REB":8,"AST":8,"STL":2,"BLK":1,"TOV":5,"X3PM":2,"fullName":"Stephen-Curry"},{"Pos":"SG","teamAbb":"GSW","PTS":28,"REB":5,"AST":3,"STL":1,"BLK":0,"TOV":1,"X3PM":6,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":22,"REB":4,"AST":9,"STL":1,"BLK":0,"TOV":2,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":29,"REB":5,"AST":4,"STL":2,"BLK":2,"TOV":4,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":23,"REB":1,"AST":2,"STL":1,"BLK":0,"TOV":1,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":21,"REB":7,"AST":8,"STL":0,"BLK":0,"TOV":2,"X3PM":0,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":15,"REB":4,"AST":5,"STL":0,"BLK":0,"TOV":2,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":9,"REB":6,"AST":5,"STL":4,"BLK":0,"TOV":4,"X3PM":2,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":24,"REB":3,"AST":3,"STL":1,"BLK":2,"TOV":3,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":13,"REB":7,"AST":3,"STL":0,"BLK":1,"TOV":1,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":35,"REB":5,"AST":5,"STL":0,"BLK":1,"TOV":2,"X3PM":4,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":27,"REB":5,"AST":3,"STL":2,"BLK":2,"TOV":4,"X3PM":1,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":17,"REB":4,"AST":1,"STL":0,"BLK":0,"TOV":1,"X3PM":1,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":39,"REB":11,"AST":7,"STL":3,"BLK":0,"TOV":7,"X3PM":4,"fullName":"Stephen-Curry"},{"Pos":"SG","teamAbb":"GSW","PTS":23,"REB":10,"AST":1,"STL":2,"BLK":1,"TOV":2,"X3PM":1,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":24,"REB":5,"AST":6,"STL":1,"BLK":0,"TOV":6,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":21,"REB":5,"AST":2,"STL":2,"BLK":0,"TOV":4,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":9,"REB":4,"AST":2,"STL":0,"BLK":1,"TOV":1,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":33,"REB":7,"AST":4,"STL":2,"BLK":0,"TOV":2,"X3PM":4,"fullName":"Stephen-Curry"},{"Pos":"SG","teamAbb":"GSW","PTS":29,"REB":4,"AST":1,"STL":1,"BLK":1,"TOV":4,"X3PM":5,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":27,"REB":4,"AST":6,"STL":1,"BLK":0,"TOV":1,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SG","teamAbb":"GSW","PTS":24,"REB":4,"AST":2,"STL":2,"BLK":2,"TOV":0,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"SG","teamAbb":"GSW","PTS":21,"REB":5,"AST":2,"STL":1,"BLK":1,"TOV":1,"X3PM":5,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":28,"REB":5,"AST":7,"STL":0,"BLK":0,"TOV":5,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":29,"REB":7,"AST":5,"STL":1,"BLK":1,"TOV":6,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":20,"REB":3,"AST":2,"STL":0,"BLK":0,"TOV":0,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":23,"REB":6,"AST":10,"STL":3,"BLK":0,"TOV":4,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":25,"REB":2,"AST":7,"STL":0,"BLK":4,"TOV":1,"X3PM":0,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":27,"REB":3,"AST":5,"STL":0,"BLK":0,"TOV":0,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":30,"REB":2,"AST":3,"STL":2,"BLK":0,"TOV":0,"X3PM":5,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":24,"REB":3,"AST":7,"STL":1,"BLK":0,"TOV":4,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":19,"REB":5,"AST":4,"STL":0,"BLK":0,"TOV":1,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":31,"REB":5,"AST":11,"STL":1,"BLK":0,"TOV":2,"X3PM":5,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":19,"REB":7,"AST":5,"STL":2,"BLK":1,"TOV":7,"X3PM":1,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":22,"REB":3,"AST":1,"STL":1,"BLK":0,"TOV":0,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":35,"REB":11,"AST":10,"STL":0,"BLK":2,"TOV":3,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":22,"REB":4,"AST":3,"STL":0,"BLK":0,"TOV":3,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":36,"REB":10,"AST":7,"STL":1,"BLK":5,"TOV":2,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":21,"REB":4,"AST":5,"STL":1,"BLK":0,"TOV":3,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":28,"REB":9,"AST":5,"STL":0,"BLK":3,"TOV":4,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":24,"REB":3,"AST":3,"STL":1,"BLK":0,"TOV":4,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":36,"REB":11,"AST":7,"STL":0,"BLK":2,"TOV":5,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":25,"REB":5,"AST":0,"STL":0,"BLK":0,"TOV":4,"X3PM":5,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":36,"REB":11,"AST":8,"STL":1,"BLK":3,"TOV":2,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":17,"REB":10,"AST":2,"STL":0,"BLK":0,"TOV":2,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":22,"REB":8,"AST":2,"STL":0,"BLK":2,"TOV":4,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":29,"REB":2,"AST":5,"STL":2,"BLK":0,"TOV":3,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":33,"REB":7,"AST":7,"STL":2,"BLK":4,"TOV":1,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":16,"REB":1,"AST":1,"STL":1,"BLK":2,"TOV":2,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":18,"REB":6,"AST":1,"STL":2,"BLK":2,"TOV":3,"X3PM":0,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":15,"REB":5,"AST":4,"STL":3,"BLK":0,"TOV":3,"X3PM":1,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":25,"REB":7,"AST":3,"STL":2,"BLK":5,"TOV":4,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":24,"REB":7,"AST":2,"STL":0,"BLK":0,"TOV":0,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":21,"REB":6,"AST":4,"STL":0,"BLK":3,"TOV":2,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":15,"REB":0,"AST":1,"STL":0,"BLK":1,"TOV":2,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":27,"REB":4,"AST":6,"STL":0,"BLK":0,"TOV":3,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":24,"REB":3,"AST":2,"STL":0,"BLK":0,"TOV":2,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":38,"REB":4,"AST":3,"STL":0,"BLK":0,"TOV":0,"X3PM":10,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":20,"REB":5,"AST":9,"STL":1,"BLK":1,"TOV":1,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":21,"REB":0,"AST":5,"STL":0,"BLK":0,"TOV":3,"X3PM":5,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":32,"REB":5,"AST":8,"STL":1,"BLK":0,"TOV":3,"X3PM":6,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":25,"REB":12,"AST":6,"STL":0,"BLK":4,"TOV":2,"X3PM":1,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":25,"REB":5,"AST":4,"STL":2,"BLK":1,"TOV":1,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":29,"REB":9,"AST":5,"STL":1,"BLK":0,"TOV":3,"X3PM":4,"fullName":"Stephen-Curry"},{"Pos":"SG","teamAbb":"GSW","PTS":28,"REB":3,"AST":4,"STL":0,"BLK":0,"TOV":1,"X3PM":6,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":45,"REB":6,"AST":3,"STL":3,"BLK":0,"TOV":2,"X3PM":8,"fullName":"Stephen-Curry"},{"Pos":"SG","teamAbb":"GSW","PTS":10,"REB":4,"AST":3,"STL":1,"BLK":1,"TOV":2,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":32,"REB":4,"AST":9,"STL":2,"BLK":0,"TOV":6,"X3PM":5,"fullName":"Stephen-Curry"},{"Pos":"SG","teamAbb":"GSW","PTS":19,"REB":5,"AST":1,"STL":0,"BLK":2,"TOV":0,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"SF","teamAbb":"GSW","PTS":40,"REB":4,"AST":4,"STL":1,"BLK":1,"TOV":5,"X3PM":6,"fullName":"Kevin-Durant"},{"Pos":"SF","teamAbb":"GSW","PTS":26,"REB":6,"AST":6,"STL":2,"BLK":0,"TOV":3,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":12,"REB":5,"AST":2,"STL":0,"BLK":0,"TOV":2,"X3PM":0,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":24,"REB":6,"AST":9,"STL":1,"BLK":0,"TOV":1,"X3PM":2,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":25,"REB":6,"AST":5,"STL":0,"BLK":1,"TOV":1,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":26,"REB":3,"AST":0,"STL":2,"BLK":0,"TOV":0,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":23,"REB":4,"AST":8,"STL":2,"BLK":0,"TOV":3,"X3PM":4,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":32,"REB":5,"AST":8,"STL":3,"BLK":1,"TOV":3,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":17,"REB":4,"AST":2,"STL":1,"BLK":1,"TOV":2,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":30,"REB":9,"AST":4,"STL":1,"BLK":0,"TOV":6,"X3PM":6,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":19,"REB":8,"AST":7,"STL":1,"BLK":0,"TOV":0,"X3PM":0,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":38,"REB":4,"AST":2,"STL":0,"BLK":1,"TOV":3,"X3PM":7,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":19,"REB":1,"AST":8,"STL":2,"BLK":0,"TOV":6,"X3PM":5,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":26,"REB":7,"AST":5,"STL":0,"BLK":2,"TOV":4,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":8,"REB":1,"AST":1,"STL":2,"BLK":0,"TOV":1,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":32,"REB":6,"AST":7,"STL":0,"BLK":0,"TOV":1,"X3PM":8,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":14,"REB":4,"AST":14,"STL":2,"BLK":2,"TOV":5,"X3PM":2,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":9,"REB":2,"AST":4,"STL":0,"BLK":0,"TOV":0,"X3PM":0,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":25,"REB":5,"AST":9,"STL":3,"BLK":0,"TOV":2,"X3PM":5,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":28,"REB":10,"AST":11,"STL":2,"BLK":3,"TOV":4,"X3PM":6,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":25,"REB":5,"AST":3,"STL":1,"BLK":1,"TOV":3,"X3PM":7,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":49,"REB":4,"AST":5,"STL":2,"BLK":0,"TOV":1,"X3PM":8,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":20,"REB":9,"AST":2,"STL":1,"BLK":1,"TOV":2,"X3PM":1,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":7,"REB":4,"AST":3,"STL":1,"BLK":2,"TOV":1,"X3PM":0,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":14,"REB":2,"AST":5,"STL":0,"BLK":0,"TOV":3,"X3PM":1,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":17,"REB":2,"AST":3,"STL":1,"BLK":0,"TOV":0,"X3PM":0,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":27,"REB":6,"AST":3,"STL":2,"BLK":0,"TOV":3,"X3PM":3,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":23,"REB":5,"AST":6,"STL":2,"BLK":0,"TOV":6,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":33,"REB":4,"AST":6,"STL":0,"BLK":0,"TOV":5,"X3PM":6,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":20,"REB":6,"AST":3,"STL":0,"BLK":0,"TOV":1,"X3PM":4,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":24,"REB":6,"AST":4,"STL":2,"BLK":0,"TOV":5,"X3PM":5,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":31,"REB":6,"AST":7,"STL":0,"BLK":2,"TOV":1,"X3PM":0,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":16,"REB":1,"AST":5,"STL":2,"BLK":0,"TOV":0,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":21,"REB":5,"AST":5,"STL":1,"BLK":1,"TOV":3,"X3PM":2,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":33,"REB":6,"AST":1,"STL":1,"BLK":1,"TOV":5,"X3PM":3,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":12,"REB":4,"AST":2,"STL":1,"BLK":0,"TOV":3,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":20,"REB":7,"AST":8,"STL":0,"BLK":0,"TOV":4,"X3PM":4,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":24,"REB":9,"AST":4,"STL":1,"BLK":2,"TOV":1,"X3PM":4,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":18,"REB":5,"AST":4,"STL":0,"BLK":0,"TOV":3,"X3PM":2,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":17,"REB":4,"AST":8,"STL":2,"BLK":0,"TOV":2,"X3PM":3,"fullName":"Stephen-Curry"},{"Pos":"SF","teamAbb":"GSW","PTS":10,"REB":6,"AST":6,"STL":0,"BLK":2,"TOV":1,"X3PM":0,"fullName":"Kevin-Durant"},{"Pos":"SG","teamAbb":"GSW","PTS":25,"REB":3,"AST":0,"STL":0,"BLK":0,"TOV":3,"X3PM":5,"fullName":"Klay-Thompson"},{"Pos":"PG","teamAbb":"GSW","PTS":22,"REB":9,"AST":7,"STL":0,"BLK":1,"TOV":3,"X3PM":3,"fullName":"Stephen-Curry"}];
return data;
}
round(number, precision) {
var factor = Math.pow(10, precision);
return Math.round(number * factor) / factor;
}
updateButtonColors(button, parent, self) {
const {myLightGrey, myMidGrey, myDarkGrey} = self.chartProps;
parent.selectAll("rect")
.attr("fill", myLightGrey)
parent.selectAll("text")
.attr("fill", myDarkGrey)
button.select("rect")
.attr("fill", myDarkGrey)
button.select("text")
.attr("fill", myLightGrey)
}
xScaleFunc(self) {
const {chartWidth, margin } = self.chartProps;
const statData = self.generateStatData();
// looks to be working correctly here
return d3.scaleLinear()
.domain(d3.extent(statData, stat => stat.AST)).nice()
.range([margin.left, chartWidth - margin.right]);
}
yScaleFunc(self, maxY) {
const { chartHeight, margin } = self.chartProps;
const statData = self.generateStatData();
return d3.scaleLinear()
.domain([0, maxY]).nice()
.range([chartHeight - margin.bottom, margin.top])
}
// Draw Graph Functions
drawHistogram() {
// 0. Setup | Scales and Other Constants
// =======================================
const { chartHeight, chartWidth, margin, myDarkGrey } = this.chartProps;
const { xScaleFunc, yScaleFunc } = this;
const xScale = xScaleFunc(this);
const statData = this.generateStatData()
const histogram = d3.histogram()
.domain(xScale.domain())
.thresholds(xScale.ticks(10))
// ======
// 1. Draw The Histogram For Each Guy
// ===================================
const histogramBars = d3.select('g.histogramBars');
const allPlayers = [... new Set(statData.map(row => row.fullName))]
// loop to find max Y for yScale
let maxY = 0;
for(var i = 0; i < allPlayers.length; i++) {
const playerStats = statData
.filter(row => row.fullName == allPlayers[i])
.map(row => row.AST)
const playerBinnedData = histogram(playerStats)
let thisYmax = d3.max(playerBinnedData, d => d.length)
maxY = (thisYmax > maxY) ? thisYmax : maxY;
}
const yScale = yScaleFunc(this, maxY);
// loop to create histogram for each player
const colors = ['yellow', 'red', 'blue'];
for(var i = 0; i < allPlayers.length; i++) {
const playerStats = statData
.filter(row => row.fullName == allPlayers[i])
.map(row => row.AST)
const playerBinnedData = histogram(playerStats)
const playerBars = histogramBars
.append("g")
.selectAll(`.rect-${allPlayers[i]}`)
.data(playerBinnedData)
.enter()
.append("rect")
.attr("class", `rect-${allPlayers[i]}`)
.attr("x", d => xScale(d.x0) + 1)
.attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - 1))
.attr("y", d => yScale(d.length))
.attr("height", d => yScale(0) - yScale(d.length))
.attr("fill", colors[i])
.attr("stroke", myDarkGrey)
.attr("stroke-width", 2)
.attr("opacity", 0.5);
}
const xAxis = g => g
.attr("transform", `translate(0,${chartHeight - margin.bottom})`)
.call(d3.axisBottom(xScale).tickSizeOuter(0))
.call(g => g.append("text")
.attr("x", chartWidth - margin.right)
.attr("y", -4)
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text('X Axis Name Goes Here'))
histogramBars.append("g")
.call(xAxis);
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 4)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text('# of Games'))
histogramBars.append("g")
.call(yAxis);
}
drawNameHoverButtons() {
// Setup Constants
// ==================
const { myLightGrey, myMidGrey, myDarkGrey } = this.chartProps;
const { updateButtonColors } = this;
const bWidth= 75;
const bHeight= 25;
const bSpace= 5;
const statData = this.generateStatData()
const allPlayers = [... new Set(statData.map(row => row.fullName))]
const nameHoverButtons = d3.select('g.nameHoverButtons')
// ====
// Add buttons
// ==================
const self = this;
const buttonGroup = nameHoverButtons.selectAll("g.nameButton")
.data(allPlayers)
.enter()
.append("g")
.attr("class", "button")
.style("cursor", "pointer")
buttonGroup.append("rect")
.attr("class","buttonRect")
.attr("width",bWidth)
.attr("height",bHeight)
.attr("x", (d,i) => 500 + (bWidth+bSpace)*i)
.attr("y", 0)
.attr("rx", 4) // rx and ry give the buttons rounded corners
.attr("ry", 4)
.attr("fill", myLightGrey)
.attr("stroke", myDarkGrey)
.attr("stroke-width", "0.1em")
// adding text to each toggle button group
buttonGroup.append("text")
.attr("class","buttonText")
.attr("font-family", "arial")
.attr("font-size", "0.6em")
.attr("x", (d,i) => 500 + (bWidth+bSpace)*i + bWidth/2)
.attr("y", 10)
.attr("text-anchor","middle")
.attr("dominant-baseline","central")
.attr("fill", '#222')
.text(d => d)
buttonGroup
.on("click", function(d,i) {
updateButtonColors(d3.select(this), d3.select(this.parentNode), self)
self.setState({selectedName: allPlayers[i]})
})
.on("mouseover", function(d, i) {
if (d3.select(this).select("rect").attr("fill") != myDarkGrey) {
d3.select(this)
.select("rect")
.attr("fill", myMidGrey); // lol almost here keep trying
}
d3.selectAll(`g.histogramBars rect`)
.attr('opacity', 0.1)
d3.selectAll(`.rect-${allPlayers[i]}`)
.attr('z-index', 3)
.attr('opacity', 1)
})
.on("mouseout", function(d, i) {
if (d3.select(this).select("rect").attr("fill") != myDarkGrey) {
d3.select(this)
.select("rect")
.attr("fill", myLightGrey);
}
d3.selectAll(`g.histogramBars rect`)
.attr('opacity', 0.5)
d3.selectAll(`.rect-${allPlayers[i]}`)
.attr('z-index', 1)
.attr('opacity', 0.5)
})
}
drawStatButtons() {
}
// When component mounts, get
componentDidMount() {
const { chartHeight, chartWidth, svgID } = this.chartProps;
d3.select(`#${svgID}`)
.attr('width', '100%')
.attr('height', '100%')
.attr('viewBox', "0 0 " + chartWidth + " " + chartHeight)
.attr('preserveAspectRatio', "xMaxYMax");
this.drawHistogram()
this.drawNameHoverButtons()
}
render() {
const { svgID } = this.chartProps;
return (
<div ref="scatter">
<svg id={svgID}>
<g className="histogramBars" />
<g className="nameHoverButtons" />
<g className="points" />
</svg>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.8.0-alpha.1/d3-tip.js"></script>
<div id='root'>
FUCKING WORK
</div>我认为我的问题很简单，但很难描述打字，但我会尝试。
此图中使用的 3 种主要颜色是红色、蓝色和黄色。但是，如果您查看第 3 列，您会看到蓝色、深蓝色和紫色。这是因为我的 for 循环的顺序，首先绘制黄色的直方图，然后是红色的直方图，然后是蓝色条的直方图。由于最后绘制了蓝色条，因此到目前为止最强调的颜色是蓝色，即使我使用了 0.5 的不透明度。
例如，如果您要更改我的代码中创建颜色数组的行，通过重新排序颜色，您将看到新的重点放在最后绘制的颜色上。
我希望在每个条形列中看到黄色、红色和蓝色，而不是蓝色、深蓝色、紫色。如果对于特定直方图列，黄色具有最低 y 值（例如 y=3），然后是红色（y=5），然后是蓝色（y=8），我想要底部的强调颜色条的一部分 (0-3) 为黄色，条的中间部分 (3-5) 为红色，条的顶部为蓝色 (5-8)。
如果我能详细说明我在寻找什么，请告诉我。否则，请提前感谢我能得到的任何帮助！
解决方案
推荐阅读
- java - 删除 `ArrayList` 的一个元素，并通过自定义 `Dialog` 的命令将信息设置为 `MainActivity` 中的布局
- reactjs - 无法渲染复杂的 React 元素以用 id 替换 DOM 元素
- mysql - mysql 在行上选择分组依据和 datdiff
- c# - Task-Like 和 ConfigureAwait(false)，有可能吗？
- android - Firebase Auth 在 Android 手机上不起作用 - 弹出窗口闪烁
- python - 向数据框中的新列添加值
- visual-studio - 如何获取选定的 FileView 项目
- c - 我想用 C 语言创建一个折扣计算器，使用一个函数。我想从用户那里获取值。但我的不工作
- scheme - Chicken Scheme.- 如何将复数（例如： (sqrt 2) ）转换为整数？不考虑舍入策略
- arrays - 在数组中查找“空帧”（LRU 和 OS 上的模拟）