月間/月をx軸にプロットする方法月間の間隔を日数で指定する

Question

私はx軸上の日付を持つD3 js棒グラフを実装しようとしていますが、lablesは間隔を月と日で表示する必要があります。 私はコードのチャートとフィドルを生成することができた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を月/年から日/月に変更したいだけですか？ここでは、更新fiddleある

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

：次のようにx軸宣言であなたのthickFormatを変更することによって達成することができます。

D3.js documentationで可能なすべての日付/時刻形式を見つけることができます。