javascript - 遍历除最后一个以外的所有刻度线

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 是一个函数，如果给定的数据不代表最后一个报价，它会返回一个真值。

下面是一个过滤器的例子:

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>