Exapandable使用d3.js的堆積條形圖

Question

我正在嘗試創建堆積的條形圖，以便當您點擊它們時，它會爲您提供有關該堆棧的更多詳細信息。

考慮每個小節代表一個科目，條形圖中的每個小節代表掌握六個不同級別的學生學習該科目的能力：比如1級到6級;學生和6級的水平1-表現很差表示學生已掌握的主題

比方說，最初堆疊條是這樣的：

如果選擇一個主題，可以說實幾何。

然後，我在酒吧的一個點擊：

如上圖可以看出，有4名學生誰在這個問題苦苦掙扎，而4名學生需要這個問題的做法..和等等...

然後是疊置條將擴大這種方式，給了我更多的有關信息是什麼樣

我們如何能在D3做到這一點？

任何幫助表示讚賞。

Answer 1

我沒有看到任何研究或試圖學習或使用D3。雖然D3最初可能令人望而生畏，但文檔使其相當平易近人，如果您的問題稍微具體一些，您可能會在這裏獲得更多的關注。

這就是說，看看下面的例子。您會看到D3是將數據映射到元素並協調DOM操作的助手。還要注意，簡單的舊CSS可以完成很多交​​互性要求。最後，明白你可以完成許多不同的方式;這只是一個快速入侵。

var student_data = [{ 
 
    category: 'Struggling', 
 
    students: [ 
 
    'Ben', 
 
    'Elizabeth' 
 
    ] 
 
}, { 
 
    category: 'Level One', 
 
    students: [ 
 
    'Jessica', 
 
    'Matt' 
 
    ] 
 
}, { 
 
    category: 'Mastered', 
 
    students: [ 
 
    'John', 
 
    'Katie' 
 
    ] 
 
}]; 
 

 
// the quantile scale maps an input domain of 
 
// values to an output range of values by 'spreading' 
 
// the domain across the range. 
 
var colors = d3.scale.quantile() 
 
    .domain([0, student_data.length]) 
 
    .range(['red', 'grey', 'lightblue', 'darkblue']); 
 

 
// the base element 
 
var root = d3.select('.panel'); 
 

 
// selectAll ~= querySelectorAll 
 
// says, find all elements with class 'category' 
 
// if none exist, prepare a selection of 
 
// student_data.length elements 
 
var display = root.selectAll('.category') 
 
    .data(student_data); 
 

 
// take the prepared selection and 
 
// for each 
 
display.enter() 
 
    // create an element 
 
    .append('div') 
 
    // assign the 'category' class to the element 
 
    .attr('class', 'category') 
 
    // set the background color 
 
    .style('background-color', function(d, i) { 
 
    // d is the current array element of student_data 
 
    // i is the index of the current array element of student_data 
 
    // so, pass i to the colors scale/map to get back a color 
 
    return colors(i); 
 
    }) 
 
    // add a mouse enter handler to set the text of a 
 
    // yet to be added label. 
 
    .on('mouseenter', function(d) { 
 
    // this is the current element 
 
    d3.select(this) 
 
     // so, select the first element 
 
     // with class label 
 
     .select('.label') 
 
     // and set it's text to the category property 
 
     // of current array element of student_data 
 
     .text(d.category); 
 
    }) 
 
    // add a mouse leave handler to reset the text of the still 
 
    // yet to be added label. 
 
    .on('mouseleave', function(d) { 
 
    d3.select(this).select('.label').text(d.students.length); 
 
    }) 
 
    // for each created element 
 
    .each(function(d) { 
 
    // select the current element 
 
    var selection = d3.select(this); 
 
    // create the label referenced above 
 
    var label = selection.append('div') 
 
     // assign it a class of 'label' 
 
     .attr('class', 'label') 
 
     // and set it's text to count of 
 
     // the students property 
 
     .text(function(d) { 
 
     // d = student_data[i] 
 
     return d.students.length; 
 
     }); 
 
    // also, prepare a new selection of 
 
    // elements for each of the student names 
 
    var names = selection 
 
     .selectAll('.student') 
 
     .data(d.students); 
 
    // take the prepared selection and 
 
    // for each 
 
    names.enter() 
 
     // create an element 
 
     .append('div') 
 
     // assign the 'student' class 
 
     .attr('class', 'student') 
 
     // and set the text to that 
 
     // of the current element 
 
     .text(function(dd) { 
 
     // dd = student_data[i].students[j] 
 
     return dd; 
 
     }); 
 
    });

div { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    font-family: arial; 
 
} 
 
.panel { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-align: start; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start; 
 
    width: 100%; 
 
    font-size: 0.8rem; 
 
} 
 
.category { 
 
    display: inline-block; 
 
    padding: 0.5rem; 
 
    min-width: 2rem; 
 
    min-height: 2rem; 
 
    color: white; 
 
    background-color: black; 
 
    transition: all 250ms ease; 
 
} 
 
.category:hover { 
 
    min-width: 10rem; 
 
    width: auto; 
 
    height: auto; 
 
    transition: all 250ms ease; 
 
} 
 
.label { 
 
    transition: all 250ms ease; 
 
} 
 
.student { 
 
    display: none; 
 
    padding: 0.25rem; 
 
    width: 100%; 
 
    color: black; 
 
    background-color: white; 
 
    cursor: pointer; 
 
    transition: all 250ms ease; 
 
} 
 
.student:hover { 
 
    background-color: lightblue; 
 
} 
 
.category:hover .label { 
 
    padding-bottom: 0.5rem; 
 
} 
 
.category:hover .student { 
 
    display: inline-block; 
 
}

<div class='panel'></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>