D3选择div和动态更新CSS类

我想制作一个显示过去5天的交互式日历对象。它由html <li>和<span>元素组成。我意识到jquery可能是解决dom操作的常规方法，但我有动机使用d3方法。代码本身非常清晰，但我还将包含一个简要的事件摘要，说明我正在尝试做什么。D3选择div和动态更新CSS类

d3.selectAll('li').on('click', function(d) { 
 
    var array = d3.select(this)[0]; 
 
    var tab = array[0]; 
 
    var tabClass = tab.className.split(" ")[1]; 
 
    var priorTab = d3.selectAll('.tab0'); 
 
    var tabIndex = [].indexOf.call(tab.parentNode.children, tab); 
 
    priorTab.classed('tab0', false); 
 
    d3.select(tab).classed(tabClass, false); 
 
    d3.select(tab).classed('tab0', true); 
 
    d3.selectAll('li:not(.tab0)').each(function() { 
 
    var tempArray = d3.select(this)[0]; 
 
    var tempTab = tempArray[0]; 
 
    var tempTabClass = tempTab.className.split(" ")[1]; 
 
    var tempIndex = [].indexOf.call(tempTab.parentNode.children, tempTab); 
 
    var tempIndexDifference = Math.abs(tabIndex-tempIndex); 
 
    d3.select(tempTab).classed(('tab'+tempIndexDifference), true); 
 
    }); 
 
});

.tab0 { 
 
    color:#77b4c9; 
 
    box-shadow: none; 
 
    transition: all .2s linear; 
 
} 
 

 
.tab0 span:first-of-type { 
 
    background-color: #fff; 
 
    box-shadow: none; 
 
    font-size: 50px; 
 
    margin-top: 15px; 
 
    display:block; 
 
} 
 

 
.tab1 { 
 
    background-color: #cbdeea; 
 
    color: #fff; 
 
} 
 

 
.tab2 { 
 
    background-color: #a6cdd9; 
 
    color: #fff; 
 
} 
 

 
.tab3 { 
 
    background-color: #77b4c9; 
 
    color: #fff; 
 
} 
 

 
.tab4 { 
 
    background-color: #519ab6; 
 
    color: #fff; 
 
} 
 

 
.contentTitleSize { 
 
    font-size: 50px; 
 
} 
 

 
.contentTitle { 
 
    color: #000; 
 
    height: 73px; 
 
    margin-top: 27px; 
 
    font-family: Play; 
 
} 
 

 
.contentTitle, .contentArea { 
 
    display:inline-block; 
 
} 
 

 
.contentArea { 
 
    height:320px; 
 
    width:312px; 
 
    margin-left: 25px; 
 
    overflow: hidden; 
 
} 
 

 
.subheading { 
 
    font-size: 18px; 
 
    height: 20px; 
 
    font-family: Play; 
 
    color: #77b4c9; 
 
    margin-top: 14px; 
 
    margin-bottom: 24px; 
 
} 
 

 
.outerContainer { 
 
    width:566px; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    margin-right: 27px; 
 
} 
 

 
section { 
 
    display:block; 
 
} 
 

 
*, :after, :before { 
 
    -webkit-box-sizing: inherit; 
 
    box-sizing: inherit; 
 
} 
 

 
*, :after, :before { 
 
    -webkit-box-sizing: inherit; 
 
    box-sizing: inherit; 
 
} 
 

 
::selection { 
 
    background: #b3d4fc; 
 
    text-shadow: none; 
 
} 
 

 

 
.tabPanel { 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    width:160px; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
ul { 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 40px; 
 
} 
 

 
li { 
 
    display:list-item; 
 
} 
 

 
.listTabs { 
 
    display:block; 
 
    list-style: none; 
 
    font-size: 22px; 
 
    font-family: Play; 
 
    text-align: center; 
 
    padding-top: 12px; 
 
    padding-bottom: 13px; 
 
    cursor: pointer; 
 
    -webkit-box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11); 
 
    box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11); 
 
} 
 

 
.container { 
 
    height:320px; 
 
    width: 100%; 
 
    margin-bottom:24px; 
 
    border-radius: 2px; 
 
    background-color: #fff; 
 
    font-family: Roboto-Regular,serif; 
 
    line-height: 1; 
 
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1) 
 
} 
 

 
.bottomButton { 
 
    height: 61px; 
 
    background-color: #327ca3; 
 
    border-radius: 3px; 
 
    font-size: 20px; 
 
    font-family: Play; 
 
    letter-spacing: .4px; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 61px; 
 
    cursor: pointer; 
 
}

<script src="https://d3js.org/d3.v3.min.js"> 
 
    <div class="outerContainer"> 
 
     <section class="container"> 
 
      <ul class="tabPanel"> 
 
       <li class="listTabs tab0" role="button"> 
 
        <span>02</span> 
 
        <span>OCT</span> 
 
       </li> 
 
       <li class="listTabs tab1" role="button"> 
 
        <span>01</span> 
 
        <span>OCT</span> 
 
       </li> 
 
       <li class="listTabs tab2" role="button"> 
 
        <span>30</span> 
 
        <span>SEP</span> 
 
       </li> 
 
       <li class="listTabs tab3" role="button"> 
 
        <span>29</span> 
 
        <span>SEP</span> 
 
       </li> 
 
       <li class="listTabs tab4" role="button"> 
 
        <span>28</span> 
 
        <span>SEP</span> 
 
       </li> 
 
      </ul> 
 
      <div class="contentArea"> 
 
       <a class="contentTitle contentTitleSize">Content Area</a> 
 
       <div class="subheading"> 
 
        <span> 
 
        <strong>First</strong> 
 
        "Second and Third"::after 
 
        </span> 
 
        <span>more info</span> 
 
       </div> 
 
       <div class="details"> 
 
        <p>lots of details</p> 
 
       </div> 
 
     </section> 
 
     <div> 
 
      <div class="bottomButton"> 
 
      Click Me</div> 
 
      </div> 
 
     </div>

用户点击其然后被分配一个类，以表明它是有源标签（.tab0在我的代码）
我有4个以外的标签课程范围从.tab1一直到.tab4。这些类有不同的background-color。命名方案基于选项卡距活动选项卡多远。 .tab1相邻（顶部或底部）.tab4很遥远。
我再选择其他选项卡，并使用.each()申请单独background-color基于其关系位置，活动选项卡的标签。这是通过给它一个新的.tabx类来实现的。因此，例如，如果您点击中间的第三个标签（[].indexOf.call(tab.parentNode.children, tab)等于2，那么它上面的标签和下面的标签将具有类tab1 - 因为0-1的绝对值为1）。

尽管我仔细地尝试修改它，但我无法得到它的工作。没有任何选项卡用新颜色更新，我无法理解为什么开发工具显示索引正在正确计算每个时间

问题：如何让这个动态颜色更新起作用？换句话说，无论用户点击哪个标签都是白色，其他所有标签都会更新根据它们与活动选项卡的关系位置，吃掉background-color。

澄清

为了澄清，这是不一样的，从旧的活动标签交换样式新，我的意思是更新所有background-color S上的标签到一个新的价值基础上走多远他们离开新的活动标签。例如，直接位于新活动选项卡顶部和底部的选项卡将是最接近的，因此他们应该得到类：.tab1。远离两个选项卡的选项卡将获得.tab2等等。请注意，初始状态的第一个选项卡是活动选项卡，因此只有一个类别为.tab1的选项卡，因为上面不能有任何选项卡。

来源

2017-10-10 Arash Howaida

您的片段没有运行。它应该是'

D3选择div和动态更新CSS类

相关问题