Question

我有一个带有x轴的d3图表，它使用自定义时间格式：

var x = d3.time.scale.utc()
        .domain([start, end])
        .range([0, width]);

var customTimeFormat = d3.time.format.utc.multi([
    ["%b %d", function(d) { return d.getUTCDate() != 1; }],
    ["%b", function(d) { return d.getUTCMonth(); }],
    ["%Y", function() { return true; }]
]);

var xAxisTop = d3.svg.axis()
                .scale(x)
                .orient("top")
                .tickFormat(customTimeFormat)
                .innerTickSize(-height)
                .outerTickSize(0)
                .ticks(d3.time.month.utc, 1);

我希望能够做到的是每个月都有一个标记，但每个月只有一个标签。但是，我似乎能够做到（a）每个月都有一个标记和标签，或者（b）每三个月都有一个标记和标签。

如何指定每月绘制刻度，但每三个月只显示标签？

Answer 1

您可以独立于x轴使用自定义时间格式这一事实。

一种解决方案是简单地找到该刻度中的文本并将其删除：

var ticks = d3.selectAll(".tick text");
ticks.attr("class", function(d,i){
    if(i%3 != 0) d3.select(this).remove();
});

我使用模数（i%3）得到3的倍数。

检查此代码段：

＆＃13;

var width = 550, height = 200;

var data = [{month: "Jan"},
{month: "Feb"},
{month: "Mar"},
{month: "Apr"},
{month: "May"},
{month: "Jun"},
{month: "Jul"},
{month: "Aug"},
{month: "Sep"},
{month: "Oct"},
{month: "Nov"},
{month: "Dec"},
];

var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	
var xScale = d3.scale.ordinal()
    .domain(data.map(function(d){ return d.month}))
    .rangeBands([0, width*0.95])
	
var xAxis = d3.svg.axis().scale(xScale)
	.orient("bottom");

svg.append("g")
	.attr("transform", "translate(10,100)")
	.attr("class", "x axis")
	.call(xAxis);
	
var ticks = d3.selectAll(".tick text");

ticks.attr("class", function(d,i){
 if(i%3 != 0) d3.select(this).remove();
});

＆＃13;

.axis path, .axis line {
fill: none;
stroke: #4e5a64;
shape-rendering: crispEdges;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

Answer 2

我遇到了这个问题，最后我使用了CSS。每个tick元素都有两个子元素，标签为<text>，网格线为<line>，因此您必须选择内部文本元素，并且网格线将保留在原位

.tick:nth-child(3n) text {
    visibility: hidden;
}

（：

Answer 3

我认为tickformats在这里对保持整洁很有帮助，至少对我有用。

代码未经测试，但我只是想引起我们对如何操纵tickformat的关注。

var xAxisTop = d3.svg.axis()
                .scale(x)
                .orient("top")
                .tickFormat((interval,i) => {
                  return i%3 !== 0 ? " ": interval;
                 })
                .innerTickSize(-height)
                .outerTickSize(0)
                .ticks(d3.time.month.utc, 1);

在d3时间轴上显示每个其他刻度标签？

3 个答案: