placing the x-axis on top

[Mathew Porterfield]

Hi I am a newby person and have been given code that uses the d3.v3.min.js

All I want to do is move the x-axis from the bottom of the graph to the top.

I tried changing .orient("bottom") to .orient("top") but that only moves the x_axis into and behind the graph.

Please help have spent several days messing with this and can't get the x-axis to the top of the graph.

Thank you

here is the code:

function make_report(data) {

var y_domain = []

for (i = 0; i < data.length; i++) {

y_domain.push(i);

}

var tooltip_div = d3.select("body").append("div")

.attr("class", "tooltip")

.style("opacity", 0);

var _height = 50 * data.length;

var margin = { top: 10, right: 10, bottom: 20, left: 200 },

width = 960 - margin.left - margin.right,

height = _height - margin.top - margin.bottom;

var rect_height = height / data.length;

var x = d3.time.scale()

.domain([new Date(_year, 0, 1), new Date(_year, 11, 31)])

.range([0, width]);

var xAxis = d3.svg.axis()

.scale(x)

.orient("bottom")

.ticks(d3.time.months)

.tickSize(16, 0)

.tickFormat(d3.time.format("%B"));

var y = d3.scale.ordinal()

.domain(y_domain)

.rangePoints([0, height], 1);

var yAxis = d3.svg.axis()

.scale(y)

.tickFormat(function (d) { return data[d].req_name; })

.orient("left");

var y_0 = y(0);

var y_1 = y(1);

var svg = d3.select("#calendar").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

svg = svg.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis)

.selectAll(".tick text")

.style("text-anchor", "start")

.attr("x", 6)

.attr("y", 6);

svg.append("g")

.attr("class", "y axis")

.attr("transform", "translate(0,0)")

.call(yAxis);

d3.selectAll('.tick').on('click', function (d, i) {

if (data[d]) {

window.open('RequirementDetail.aspx?id=' + data[d].req_id);

}

});

d3.selectAll('.tick')

.filter(function (d, i) {

return data[d]

})

.style('fill', 'blue');

var ndx = 0;

var rows = svg.selectAll(".row")

.data(data)

.enter()

.append('g')

.attr('class', 'row')

.attr('transform', function (d, i) {

return 'translate(0,' + y(i) + ')'

})

.on("mouseenter", function () {

d3.select(this).selectAll('g > rect').attr('fill', 'PowderBlue');

})

.on('mouseleave', function (d, i) {

var color = i % 2 === 0 ? "Gainsboro" : "Snow";

d3.select(this).selectAll('g > rect').attr('fill', color);

});

rows.append('rect')

.attr('x', '0')

.attr('y', '-' + rect_height / 2 + 'px')

.attr('height', rect_height + 'px')

.attr('width', width)

.attr('fill', function (d, i) {

return i % 2 === 0 ? "Gainsboro" : "Snow";

});

var symbol = d3.svg.symbol()

.type('circle')

.size(function (d) {

return Math.random() * 1000;

});

　

rows.selectAll('path')

.data(function (d) {

return d.task_data;

})

.enter()

.insert('svg:a')

.attr('xlink:href', function (d) {

return 'TaskDetail.aspx?id=' + d.task_id;

})

.append("path")

.attr('d', d3.svg.symbol()

.type(function(d){

var importance = getImportanceNameByID(d.importance);

if (importance[0].DisplayName === "Critical") {

return 'triangle-up';

} else if (importance[0].DisplayName === "External") {

return 'square';

}

return "circle";

}).size(150))

//

//

// return d3.svg.symbol().type('triangle-up').size(150);

//} else if (importance[0].DisplayName === "External") {

// return d3.svg.symbol().type('circle').size(150);

//}

//return d3.svg.symbol().type('square').size(150);

.attr('class','dot')

.attr('transform',function(d){

var split_date_string = d.due_date.split('/');

var js_date = new Date(split_date_string[2], split_date_string[0] - 1, split_date_string[1]);

var x_value = x(js_date);

return 'translate(' + x_value + ',0)';

})

.style('fill', function (d) {

var status = getStatusNameByID(d.task_status)[0].DisplayName;

if (status === "New" || status === 'Document Uploaded') {

return 'blue';

} else if (status === 'Awaiting Completion'

|| status === 'Awaiting QA') {

return 'orange';

} else if (status === 'Cancelled') {

return 'black';

}else if (status === 'Completed') {

return 'green';

}

return 'red';

}).on("mouseover", function (d) {

tooltip_div.transition()

.duration(200)

.style("opacity", 1);

tooltip_div.html('Due: ' + d.due_date + '<br/>Status: ' + getStatusNameByID(d.task_status)[0].DisplayName + '<br/>Importance: ' + getImportanceNameByID(d.importance)[0].DisplayName)

.style("left", (d3.event.pageX) + "px")

.style("top", (d3.event.pageY) + "px");

})

.on("mouseout", function () {

tooltip_div.transition().duration(300).style("opacity", 0);

});

}

[Erik Stel]

Hi Mathew,

Without actually checking the code, see the proposed change below (marked in bold) of a snippet of your code. The position (0,0) is top left. You might need to adjust a little to get it right. Might even become a negative value (negative according to its container).

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0,0)")    // The second 0 is the vertical position. Original line was: .attr("transform", "translate(0," + height + ")")

.call(xAxis)

Hope this helps.

Erik