对最后一个除外的所有刻度标记进行迭代

Question

我正在绘制一堆基于刻度线的矩形。但是，我不想为最后一个刻度线绘制矩形。我怎么做？我试过切片hoursg.selectAll('g.tick')，但那没有奏效。

编辑：更新代码并添加SVG，请参阅注释。

// draw axis below data 
    hoursg = svg.append('g').classed('axis', true).classed('hours', true).classed('labeled', true).attr("transform", "translate(0.5," + yaxisHeight + ")").call(hoursAxis).style("opacity", axisOpacity); 

    // Need the pixel dimensions between each tick e.g. three hours. 
    hoursTickSpacing = weekscale(moment(start).add(3, 'hours').toDate()) - weekscale(start.toDate()); 

    // add day/night shading by adding elements to the dom for every tickmark in the hours axis. 
    var hourTicks = hoursg.selectAll('g.tick'); 

    hourTicks.filter(':not(:last-child)').insert('rect', ':first-child').attr('class', function (d, i) { 
      var hours; 
      hours = d.getHours(); 
      if (hours < 6 || hours >= 18) { 
       return 'nighttime'; 
      } else { 
       return 'daytime'; 
      } 
     }).attr('x', 0).attr('width', hoursTickSpacing).attr('height', 8); 

下面是创建SVG对象：

<g class="axis hours labeled" transform="translate(0.5,100)" style="opacity: 0.6;"><g class="tick" transform="translate(0,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(12.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(25,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(37.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(50,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(62.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(75,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(87.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(100,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(112.50000000000001,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(125,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(137.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(150,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(162.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(175,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(187.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(200,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(212.49999999999997,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(225.00000000000003,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(237.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(250,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(262.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(275,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(287.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(300,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(312.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(325,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(337.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(350,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(362.50000000000006,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(375,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(387.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(400,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(412.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(424.99999999999994,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(437.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(450.00000000000006,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(462.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(475,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(487.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(500,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(512.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(525,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(537.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(550,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(562.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(575,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(587.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(600,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(612.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(625,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(637.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(650,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(662.5,0)" style="opacity: 1;"><rect class="daytime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(675,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(687.5,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><g class="tick" transform="translate(700,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g><path class="domain" d="M0,8V0H700V8"></path></g> 

这是<g class="tick" transform="translate(700,0)" style="opacity: 1;"><rect class="nighttime" x="0" width="12.5" height="8"></rect><line y2="8" x2="0"></line><text dy=".71em" y="14" x="0" style="text-anchor: middle;"></text></g>对象是有问题的。

Answer 1

您可以使用d3.selection.filter：

hoursg.selectAll('g.tick') 
    .filter(isNotLastTick) 
    .insert('rect') 
    //... 

哪里isNotLastTick是一个返回值truthy如果给定的数据并不能代表最后一跳的功能。

下面是filter一个例子：

var data = [1,2,3,4]; 
 

 
var p = d3 
 
    .selectAll('.p') 
 
    .data(data); 
 

 
p.enter() 
 
    .append('p') 
 
    .attr('class', 'p') 
 
    .text(function(d) { return d }) 
 

 
p.filter(function(d, i) { return i === 0 }) 
 
    .attr('style', 'color: red')

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

这里是没有数据的filter一个例子加盟：

var p = d3.select('div').selectAll('p'); 
 

 
p.filter(':not(:last-child)') 
 
    .attr('style', 'color: red')

<div> 
 
<p>one</p> 
 
<p>two</p> 
 
<p>three</p> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>