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>