D3 Balkendiagramm, Balken nicht angezeigt wird, Achse auf

Question

Ich habe eine hier codepen - https://codepen.io/ttmtsimon/pen/EbPgrw

Ich versuche, ein einfaches Balkendiagramm in D3 zu erstellen.

Die Achse zeigt, aber die X-Achse ist auf der Oberseite und es sollte auf der Unterseite sein und die Balken werden überhaupt nicht angezeigt.

Ich weiß, das ist eine schlechte Frage, aber ich kann nicht sehen, wo der Code falsch ist, jede Hilfe wäre willkommen.

let margin = {top: 20, right: 20, bottom:100, left:60} 
let width = 800 - margin.left - margin.right 
let height = 500 - margin.top - margin.bottom 
let x = d3.scaleBand() 
    .rangeRound([0, width]) 
    .padding(0.5); 
let y = d3.scaleLinear().range([height, 0]) 

let xAxis = d3.axisBottom(x) 
    .tickFormat((d) => { 
    return d.x; 
    }); 

let yAxis = d3.axisLeft(y) 

let svg = d3.select('.barGraph') 
    .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 + ")'); 

d3.json('https://api.myjson.com/bins/vkbjf', (data)=>{ 
    x.domain(data.map((d)=>{ 
    return d.name 
    })) 

    y.domain([0, d3.max(data, (d)=>{ 
    return d.rank 
    })]); 

    svg.append('g') 
    .attr('class', 'x axis') 
    .attr('tranform', 'translate(0 " + height + ")') 
    .call(xAxis) 
    .selectAll('text') 
    .style('text-anchor', 'end') 
    .attr('dx', '-0.5em') 
    .attr('dy', '-55em') 
    .attr('y', 30) 
    .attr('transform', 'rotate(-45)'); 

    svg.append('g') 
    .attr('class', 'y axis') 
    .call(yAxis) 
    .append('text') 
    .attr('transform', 'rotate(-90)') 
    .attr('y', 5) 
    .attr('dy', '0.8em') 
    .attr('text-anchor', 'end') 
    .text('Member Rank') 

    svg.selectAll('bar') 
    .data(data) 
    .enter() 
    .append('rect') 
    .style('fill', 'orange') 
    .attr('x', (d)=>{ 
     return y(d.rank) 
    }) 
    .attr('height', (d)=>{ 
     return height - y(d.rank) 
    }) 
}) 

Answer 1

Es gibt ein paar Probleme, nämlich Sie width oder y für Ihre Rechtecke nicht definieren. Außerdem sollte die Rechteckhöhe gleich y(value) anstatt height-y(value) sein (dies ist der Anfang des Rechtecks ​​und daher die y -Eigenschaft des Rechtecks, da die Svg-Koordinaten von oben bei y = 0 beginnen). Ihr Rechteck Attribute sollen wohl eher wie:

svg.selectAll('bar') 
    .data(data) 
    .enter() 
    .append('rect') 
    .style('fill', 'orange') 
    .attr('x', (d)=>{ 
     return x(d.name) 
    }) 
    .attr('height', (d)=>{ 
     return y(d.rank) 
    }) 
    .attr("width",x.bandwidth())  
    .attr("y",(d)=>height - y(d.rank)) 
}) 

Zweitens Sie in Ihrer Transformation inkonsistent Zitate haben (svg und x-Achse anhängt jeweils unten):

.attr('transform', 'translate(" + margin.left + "." + margin.top + ")'); 

    .attr('tranform', 'translate(0 " + height + ")') 

weshalb diese nicht zu sein rechts angehängt, brauchen Sie auch Kommas zwischen den beiden Werten.

Aktualisiert pen.