Question

I’m playing around with D3 and want tick lines to cut through a linear time graph across the vertical axis. The tick line elements are there, with the correct vectors, but they do not appear. What appears instead is the path element that runs horizontally with the tick labels.

JSFiddle Link

var width = 960;
var height = 200;
var container = d3.select(".timeTable");
var svg = container.append("svg")
    .attr("width", width)
    .attr("height", height);
var roomID = container.attr("data-room");
var times = [
    {"from":"2012-12-27 00:00:00","until":"2012-12-27 12:00:00"},
    {"from":"2012-12-27 00:00:00","until":"2012-12-27 23:59:00"},
    {"from":"2012-12-27 02:00:00","until":"2012-12-27 04:00:00"},
    {"from":"2012-12-27 03:00:00","until":"2012-12-27 21:00:00"},
    {"from":"2012-12-27 03:30:00","until":"2012-12-27 04:50:00"},
    {"from":"2012-12-27 05:00:00","until":"2012-12-27 12:00:00"},
    {"from":"2012-12-27 09:00:00","until":"2012-12-27 15:00:00"},
    {"from":"2012-12-27 13:00:00","until":"2012-12-27 23:00:00"},
    {"from":"2012-12-27 13:00:00","until":"2012-12-27 23:30:00"},
    {"from":"2012-12-27 20:00:00","until":"2012-12-27 23:59:00"},
    {"from":"2012-12-27 20:00:00","until":"2012-12-27 22:00:00"},
    {"from":"2012-12-27 23:00:00","until":"2012-12-27 23:30:00"},
    {"from":"2012-12-28 01:00:00","until":"2012-12-28 13:00:00"}
];
function draw(times) {
    // domain
    var floor = d3.time.day.floor(d3.min(times, function (d) { return new Date(d.from); }));
    var ceil = d3.time.day.ceil(d3.max(times, function (d) { return new Date(d.until); }));
    // define linear time scale
    var x = d3.time.scale()
        .domain([floor, ceil])
        .rangeRound([0, width]);
    // define x axis
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(d3.time.hours, 6)
        .tickSize(4);
    // draw time bars
    svg.selectAll("rect")
        .data(times)
        .enter().append("rect")
            .attr("class", "timeRange")
            .attr("width", function (d, i) { return x(new Date(d.until)) - x(new Date(d.from)); })
            .attr("height", "10px")
            .attr("x", function (d, i) { return x(new Date(d.from)); })
            .attr("y", function (d, i) { return i * 11; });
    // draw x axis
    svg.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(0, " + (height - 23) + ")")
        .call(xAxis);
}
draw(times);

The path element generated simply overlaps the ticks, but the ticks are not visible even with path removed.

The desired tick effect is shown here Population Pyramid – ticks on the vertical axis have a line that cuts through the rest of the graph.

Is there different behavior I need to be aware of for time scales?

Much appreciated.

Chrome 23, D3 v3

Answer 1

The trick to getting the tick lines into the plot area is to actually make a second axis and hide the labels. So your code plus the grid lines looks something like (fiddle):

// draw x axis
var xAxisLine = svg.append("g")
    .attr("class", "xAxis")
    .attr("transform", "translate(0, " + (height - 23) + ")")
    .call(xAxis);

xAxisLine.selectAll("path.domain").attr("stroke","black").style('fill','none');
xAxisLine.selectAll("line.tick").style('stroke','black');

xAxis.tickSize(height-23);
var xAxisLineOver = svg.append("g")
    .attr("class", "xAxis-overlay")
    .attr("transform", "translate(0,0)")
    .call(xAxis);

xAxisLineOver.selectAll("path.domain").attr("stroke-width",0).style('fill','none');
xAxisLineOver.selectAll("line.tick").style('stroke','red');
xAxisLineOver.selectAll("text").text("");