2
私はx軸で作業していますが、他の場所で設定された間隔変数に従って軸の目盛りを整形します。これは文字列（ 'decade'、 'lustrum'、 'years'、daysなど）です。私はそれが一般的に仕事をして働いている。以下は、17/8/19198〜24/08/1717の間の日付範囲の例であり、光沢（5年）の間隔があります。間隔に応じて変化するティックラベルのないセカンダリ（マイナー）軸があります。私はハウススタイルにいくつかのフォーマットを追加しました。 例d3時間軸の先頭の余分な目盛りを追加
私がいる問題は、私は、我々は常に最初の日付をマークとして、それは家のスタイルを一致するように、長軸の先頭に余分な目盛りを追加したいということです。私は.nice（）を使用しましたが、最後に目盛りを追加しました。また、軸の次の丸められた増分がデフォルトになります。したがって、2009年にチャートが開始され、10年の間隔がある場合、.niceは私は）それは軸の目盛りの配列をaccesingと（ドメインをunshiftingと同じくらい簡単だろうと思った
：チャートは前に私が達成したいと思うパートナーはどのようなダメ
されていない2000年にこの 
彼です[0]値はゼロの位置になります。しかし、それは動作していないようです。私は実際にテスト変数にそれらを配置するとき、ティックにアクセスするように見えません。私が戻ってくるのは、2年ごとの日付スケールです。
任意のポインタをいただければ幸いです、ありがとう
は、これは私が持っているコードです：
function xaxisDate() {
let mindate = new Date(1970, 1, 1);
let maxdate = new Date(2017, 6, 1);
let scale = d3.scaleTime()
.domain([mindate, maxdate])
.range([0, 220]);
let frameName;
let interval = 'lustrum';
let minorAxis = true;
let tickSize = 10;
let minorTickSize = 5;
let fullYear = false;
let align = 'bottom';
let xLabel;
let xLabelMinor;
function axis(parent) {
//scale.nice(getTicks(interval))
function getAxis(alignment) {
return {
top: d3.axisTop(),
bottom: d3.axisBottom(),
}[alignment];
}
const xAxis = getAxis(align)
.tickSize(tickSize)
.ticks(getTicks(interval))
.tickFormat(tickFormat(interval))
.scale(scale)
test = scale.ticks()
console.log('before',test);
// console.log('domain',scale.domain()[0])
// scale.ticks().unshift(scale.domain()[0]);
// console.log('after',scale.ticks())
// xAxis.tickValues()
const xMinor = d3.axisBottom()
.tickSize(minorTickSize)
.ticks(getTicksMinor(interval))
.tickFormat('')
.scale(scale);
xLabel = parent.append('g')
.attr('class', 'axis xAxis axis baseline')
.call(xAxis);
if (minorAxis) {
xLabelMinor = parent.append('g')
.attr('class', (d) => {
const plotHeight = d3.select('.chart-plot').node().getBBox().height;
if (plotHeight === tickSize) {
return 'axis xAxis';
}
return 'axis xAxis axis baseline';
})
.call(xMinor);
}
if (frameName) {
xLabel.selectAll('.axis.xAxis text')
.attr('id', frameName + 'xLabel');
xLabel.selectAll('.axis.xAxis line')
.attr('id', frameName + 'xTick');
if (minorAxis) {
xLabelMinor.selectAll('.axis.xAxis line')
.attr('id', frameName + 'xTick');
}
}
xLabel.selectAll('.domain').remove();
}
function getTicks(interval) {
console.log('interval',interval)
return {
'century' : d3.timeYear.every(100),
'jubilee': d3.timeYear.every(50),
'decade': d3.timeYear.every(10),
'lustrum': d3.timeYear.every(5),
'years': d3.timeYear.every(1),
'quarters': d3.timeMonth.every(3),
'months': d3.timeMonth.every(1),
'weeks': d3.timeWeek.every(1),
'days': d3.timeDay.every(1),
'hours': d3.timeHour.every(1)
}[interval];
}
function getTicksMinor(interval) {
const test = d3.timeYear.every(1);
console.log('test', test)
return {
'century': d3.timeYear.every(10),
'jubilee': d3.timeYear.every(10),
'decade': d3.timeYear.every(1),
'lustrum': d3.timeYear.every(1),
'years': d3.timeMonth.every(1),
'quarters': d3.timeMonth.every(1),
'months': d3.timeDay.every(1),
'weeks': d3.timeDay.every(1),
'days': d3.timeHour.every(1),
'hours': d3.timeMinute.every(1)
}[interval];
}
function tickFormat(interval) {
let formatFullYear = d3.timeFormat('%Y'),
formatYear = d3.timeFormat('%y'),
formatMonth = d3.timeFormat('%b'),
formatWeek = d3.timeFormat('%W'),
formatDay = d3.timeFormat('%d'),
formatHour = d3.timeFormat('%H:%M');
return {
'century': d3.timeFormat('%Y'),
'jubilee': function(d, i) {
const format = checkCentury(d, i);
return format;
},
'decade': function(d, i) {
const format = checkCentury(d, i);
return format;
},
'lustrum':function(d, i) {
const format = checkCentury(d, i);
return format;
},
'years': function(d, i) {
const format = checkCentury(d, i);
return format;
},
'quarters':function(d, i) {
const format = getQuarters(d, i);
return format;
},
'months': function(d, i) {
const format = checkMonth(d, i);
return format;
},
'weeks':function(d, i) {
const format = getWeek(d, i);
return format;
},
'days':function(d, i) {
const format = getDays(d, i);
return format;
},
'hours': function(d, i) {
const format = getHours(d, i);
return format;
},
}[interval];
function getHours(d, i) {
if (d.getHours() === 1 || i === 0) {
return formatHour(d) + ' ' + formatDay(d);
}
return formatHour(d);
}
function getDays(d, i) {
if (d.getDate() === 1 || i === 0) {
return formatDay(d) + ' ' + formatMonth(d);
}
return formatDay(d);
}
function getWeek(d, i) {
if (d.getDate() < 9) {
return formatWeek(d) + ' ' + formatMonth(d);
}
return formatWeek(d);
}
function getQuarters(d, i) {
if (d.getMonth() < 3 && i < 4) {
return 'Q1 ' + formatFullYear(d);
}
if (d.getMonth() < 3) {
return 'Q1';
}
if (d.getMonth() >= 3 && d.getMonth() < 6) {
return 'Q2';
}
if (d.getMonth() >= 6 && d.getMonth() < 9) {
return 'Q3';
}
if (d.getMonth() >= 9 && d.getMonth() < 12) {
return 'Q4';
}
}
function checkMonth(d, i) {
if (d.getMonth() === 0 || i === 0) {
const newYear = d3.timeFormat('%b %Y');
return newYear(d);
}
return formatMonth(d);
}
function checkCentury(d, i) {
if (fullYear || (+formatFullYear(d) % 100 === 0) || (i === 0)) {
return formatFullYear(d);
}
return formatYear(d);
}
}
axis.align = (d) => {
align = d;
return axis;
};
axis.frameName = (d) => {
if (d === undefined) return frameName;
frameName = d;
return axis;
};
axis.scale = (d) => {
scale = d;
return axis;
};
axis.domain = (d) => {
scale.domain(d);
return axis;
};
axis.range = (d) => {
scale.range(d);
return axis;
};
axis.fullYear = (d) => {
if (d === undefined) return fullYear;
fullYear = d;
return axis;
};
axis.interval = (d) => {
interval = d;
return axis;
};
axis.tickSize = (d) => {
if (!d) return tickSize;
tickSize = d;
return axis;
};
axis.minorTickSize = (d) => {
if (!d) return minorTickSize;
minorTickSize = d;
return axis;
};
axis.minorAxis = (d) => {
if (d === undefined) return minorAxis;
minorAxis = d;
return axis;
};
axis.xLabel = (d) => {
if (d === undefined) return xLabel;
xLabel = d;
return axis;
};
axis.xLabelMinor = (d) => {
if (d === undefined) return xLabelMinor;
xLabelMinor = d;
return axis;
};
return axis;