如何繪製D3月與x軸上的月份/年作爲月之間的間隔

Question

我想實現D3 js條形圖日期x軸和標籤應該只顯示月份和日期作爲它們之間的間距。 我可以能夠生成圖表和小提琴的代碼是code

data = [ 
    { 
    "count": 3, 
    "date": "2017-04-01T00:00:00.000Z" 
    }, 
    { 
    "count": 3, 
    "date": "2017-05-01T00:00:00.000Z" 
    }, 
    { 
    "count": 2, 
    "date": "2017-06-01T00:00:00.000Z" 
    } 
]; 
let margin = {top: 20, right: 20, bottom: 70, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 200 - margin.top - margin.bottom; 

    let x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 
    let y = d3.scale.linear().range([height, 0]); 

    let xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom") 
     .tickFormat(d3.time.format("%m/%Y")); 

    let yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(10); 

     data.forEach(function(d) { 
     d.date = new Date(d.date); 
     d.value = +d.value; 
    }); 

    let chartDiv = document.getElementById("timeline-viz"); 
    let svg = d3.select(chartDiv).append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

    x.domain(data.map(function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.count; })]); 

    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
.selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", "-.55em") 
    .attr("transform", "rotate(-90)"); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Value ($)"); 

    svg.selectAll("bar") 
    .data(data) 
    .enter().append("rect") 
    .style("fill", "steelblue") 
    .attr("x", function(d) { return x(d.date); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.count); }) 
    .attr("height", function(d) { return height - y(d.count); }); 

但我需要做的圖表類似

我是新來的日期時間條形圖任何幫助真的讚賞。

Answer 1

如果我理解正確，您只想將厚度格式從月/年更改爲日/月？它可以通過改變你thickFormat在x軸的聲明等來實現：

.tickFormat(d3.time.format("%d/%m")); 

這裏是一個更新的fiddle。

您可以在D3.js documentation中找到所有可能的日期時間格式。