So zeichnen Sie D3-Balkendiagramm mit Monaten/Jahr auf x-Achse mit Tagen als Abstand zwischen den Monaten

Question

Ich versuche, D3 js Balkendiagramm mit Datum auf X-Achse zu implementieren, und Etiketten sollten nur Monat und Tage als Abstand zwischen ihnen zeigen. ich in der Lage konnte das Diagramm und Geige für den Code zu erzeugen, ist 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); }); 

Aber ich muß Diagramm etwas wie

Ich bin neu in dem Datum Zeit Balkendiagramme jede Hilfe ist wirklich machen geschätzt.

Answer 1

Wenn ich es richtig verstehe, möchten Sie nur das dicke Format von Monat/Jahr zu Tag/Monat ändern? Es kann durch das Ändern Ihrer thickFormat in der x-Achse Erklärung wie erreicht werden:

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

Hier ist eine aktualisierte fiddle.

Sie können alle möglichen Datum-Uhrzeit-Formate in der D3.js documentation finden.