D3/CSS大教堂向上穿越/選擇

Question

我有以下HTML結構來表示一個日曆：

<table> 
    <thead>...</thead> 
    <tbody> 
    <tr>...</tr> 
    <tr> 
     <td day="4">...</td> 
     <td day="5">...</td> 
     <td day="6" class="is-startrange">...</td> 
     <td day="7">...</td> 
     <td day="8">...</td> 
    </tr> 
    <tr> 
     <td day="9">...</td> 
     <td day="10">...</td> 
     <td day="11">...</td> 
     <td day="12"> 
     <button class="day" type="button">12</button> 
     </td> 
     <td day="13">...</td> 
    </tr> 
    </tbody> 
</table> 

我的問題是：從按鈕在12天開始，我怎麼能竄動，選擇所有按鈕元素，直到遇到is-startrange類爲止？ 每個表格單元格都是一個表示日期的按鈕，並且偵聽器已添加到所有按鈕元素。點擊日期後，我會將選定日期作爲起點。

我想添加樣式到開始日期和選定日期之間的所有按鈕元素（要麼添加類，要麼通過純CSS）。

D3選擇或純粹的CSS可以實現嗎？

Answer 1

由於Gerardo Furtado已在他的comment中提到過，問題實際上並不是向上遍歷DOM，而是關於td元素的迭代。這可以通過使用d3.selectAll("td")輕鬆完成，這將產生在頁面上找到的所有td的扁平選擇。根據您的佈局，您可能需要將選擇範圍進一步縮小到特定的表格，這可以通過將選擇器調整爲"table.myTable td","#tableId td"等來完成。

有了這個選擇在手就可以申請一類，說range，通過使用selection.classed(names[, value])這可能需要傳遞的第二個參數value功能：

如果值是一個函數，然後該功能爲每個選定的元件進行評價，爲了，正在傳遞的當前原點（d），當前指數（我），和當前組（節點），與此作爲當前的DOM元素。函數的返回值然後用於爲每個元素分配或取消分配類。

的唯一任務左邊是實現濾波器函數以跟蹤，如果一個元素是內的期望或範圍或不和，因此，確定是否分配range類。

下面的代碼片段顯示瞭如何可以全部使用提供給.classed()過濾功能rangeFilter()放在一起：

// The day parameter determines the stop criterion 
 
function rangeFilter(day) { 
 
    // This property is closed over by the following function to keep track of the 
 
    // range. If this is true, this element and following elements belong to the 
 
    // range until this property becomes false again once reaching the button's td. 
 
    var inRange = false; 
 
    
 
    // Filter function returning true, if the element belongs to the range. 
 
    return function(d) { 
 
    element = d3.select(this); // The actual td element of this iteration step. 
 
    // Evaluate if the element is still in the range or, in case the range has not 
 
    // yet started, check if we reached the td.is-startrange. 
 
    inRange = (inRange && element.attr("day") != day) 
 
      || element.classed("is-startrange");  
 

 
    // XOR to exclude the .is-startrange element. 
 
    return inRange != element.classed("is-startrange"); 
 
    } 
 
} 
 

 
d3.selectAll("button") 
 
    .on("click", function() { 
 
    // For all tds check if they belong to the range and set the class based 
 
    // on the result of the filter function passing in this buttons value. 
 
    d3.selectAll("td") 
 
     .classed("range", rangeFilter(d3.select(this).text())); 
 
    });

.is-startrange { 
 
    background-color: limegreen; 
 
} 
 

 
.range { 
 
    background-color: red; 
 
}

<script src="https://d3js.org/d3.v4.js"></script> 
 
<h1>Hit the button</h1> 
 
<table> 
 
    <thead>...</thead> 
 
    <tbody> 
 
    <tr>...</tr> 
 
    <tr> 
 
     <td day="4">...4...</td> 
 
     <td day="5">...5...</td> 
 
     <td day="6" class="is-startrange">...6...</td> 
 
     <td day="7">...7...</td> 
 
     <td day="8">...8...</td> 
 
    </tr> 
 
    <tr> 
 
     <td day="9">...9...</td> 
 
     <td day="10">...10...</td> 
 
     <td day="11">...11...</td> 
 
     <td day="12"> 
 
     <button class="day" type="button">12</button> 
 
     </td> 
 
     <td day="13">...13...</td> 
 
    </tr> 
 
    </tbody> 
 
</table>