How to make dual labeled axes from one dataset with d3

Question

I'm trying to make a scatterpoint with dual labeled x-axes in d3 angular. I have my label-data on the format:

xlabels = [{PtName: "Name1", SocName: "Same soc!", Other: "Other1"},
           {PtName: "Name2", SocName: "Same soc!", Other: "Other2"},
           {PtName: "Name3", SocName: "Other soc", Other: "Other3"}];
ylabels = ["20%", "40%", "60%", "80%", "100%"]

And I want to have one x-axis showing PtName and another showing SocName. I'm trying with:

x = d3.scale.ordinal().domain(xlabels.map(function (d) { return {PtName: d.PtName, SocName: d.SocName}; }));
y = d3.scale.ordinal().domain(ylabels);

xAxis1 = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d, i) { return d.PtName; });
xAxis2 = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d, i) { return d.SocName; });
yAxis = d3.svg.axis().scale(y).orient('left');

But the tickFormat do not seem to work the way I indended. I get axes with only one value (the first): "Name1" and "Same sock!". What am I doing wrong?