x軸のテキストに日付書式を適用する

Question

x軸で使用された日付にd3.time.format("%b-%Y")を適用しようとしています。これはになるように、誰かを助けることができる望んhttps://plnkr.co/edit/3d5UhM?p=preview

：ここ

は、軸を追加し

var xLabels = svg 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + (margin.top + height + 12) + ")"); 

var formatDateOutputX = d3.time.format("%b-%Y"); 

xLabels.selectAll("text.xAxis") 
    .data(BarData) 
    .enter() 
    .append("text") 
    .text(function(d) { 
    return d.dt;      //<< returns dates 
    //return formatDateOutputX(d.dt); //<< NOTHING RETURNED 
    }) 
    .attr({ 
    'text-anchor': "middle", 
    transform: function(d, i) { 
     var x = (i * (width/BarData.length)) + ((width/BarData.length - barPadding)/2); 
     var y = 20; 
     return 'translate(' + x + ',' + y + ')rotate(-90)'; 
    }, 
    dy: "0.35em", //dx: "-1.05em", 
    'class': "xAxis" 
    }); 

ラベルコード上、この可視化のコード285から309の行に関連しています私が適用したいと思うかなり一般的な操作。私は間違って何をしていますか？

Answer 1

有効な日付はformatDateOutputXに渡されていないため、処理方法はわかりません。値を適切に解析する必要があり、さまざまな方法でそれを行うことができます。 d3はparseメソッドをtime.formatに提供するので、これはおそらく最良の方法です。このような何かが動作しますあなたの場合は

：

var formatDateOutputX = d3.time.format("%b-%Y"); 
    var readDate = d3.time.format("%d/%m/%Y").parse; 

    xLabels.selectAll("text.xAxis") 
     .data(BarData) 
     .enter() 
     .append("text") 
     .text(function(d) { 
     return formatDateOutputX(readDate(d.dt)); 
     }) 

はPlunkrを確認してください。