在d3時間軸上顯示其他所有刻度標籤？

我有與使用自定義時間格式的x軸的D3圖表：在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）每三個月有一個勾號和標籤。

我該如何指定每個月繪製刻度，但每個第三個月只能顯示標籤？

來源

2016-08-12 Jonah Bishop

你可以做到這一點，獨立於你的x軸使用自定義時間格式的事實。

一種解決方案是簡單地發現在蜱的文本，將其取出：

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

我使用模（i%3）獲得的3

檢查倍數這個片段：

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") 
 
\t .append("svg") 
 
\t .attr("width", width) 
 
\t .attr("height", height); 
 
\t 
 
var xScale = d3.scale.ordinal() 
 
    .domain(data.map(function(d){ return d.month})) 
 
    .rangeBands([0, width*0.95]) 
 
\t 
 
var xAxis = d3.svg.axis().scale(xScale) 
 
\t .orient("bottom"); 
 

 
svg.append("g") 
 
\t .attr("transform", "translate(10,100)") 
 
\t .attr("class", "x axis") 
 
\t .call(xAxis); 
 
\t 
 
var ticks = d3.selectAll(".tick text"); 
 

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

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

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

來源

2016-08-12 15:17:47

我有這個問題，我結束了使用CSS。各記號元素有兩個孩子，<text>爲標籤和<line>網格線，所以你必須選擇內部文本元素和網線將留在原地

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

（：

來源

2017-08-06 01:57:42

在d3時間軸上顯示其他所有刻度標籤？

回答

相關問題