Çift yatay çizgi grafiği yapmak için D3'ü kullanma

Question

Sadece D3 ile başlıyorum ve csv dosyasını kullanarak yatay çubuk grafik çizmem gerekiyor. Veriler, farklı ABD eyaletlerinde kadın ve erkeklerin ücretini karşılaştırmaktır. Her devletin iki dokunma çubuğuna sahip olması gerekir (biri erkek ve bir tanesi kadınlar için). CSV dosyasında, her bir satırın adının ve uygun verilerin bulunduğu, her satırın bulunduğu State, Women, Men başlık satırı vardır.

Şimdiye kadar yaptığım işte.

var margin = { top: 20, right: 10, bottom: 100, left: 40 }, 
    width = 700 - margin.right - margin.left, 
    height = 500 - margin.top - margin.bottom; 

var svg = d3.select('body') 
    .append('svg') 
    .attr ({ 
    "width" : width + margin.right + margin.left, 
    "height" : height + margin.top + margin.bottom 
}) 

    .append('g') 
     .attr("transform", "translate(" + margin.left + ',' + margin.right + ')'); 

var xScale = d3.scale.ordinal() 
    .rangeRoundBands([height,0], 0.2, 0.2); 

var yScale = d3.scale.linear() 
    .range([0, width]); 

var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("left"); 

var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("bottom"); 

d3.csv("state-women-men.csv", function(error, data) { 
    if(error) console.log("Error, data not loaded"); 

    data.forEach(function(d) { 
     d.Women = +d.Women; 
     d.Men = +d.Men; 
     d.State = d.State; 
     console.log(d.Men); 
     console.log(d.Women); 
    }); 

    xScale.domain(data.map(function(d) { return d.State;})); 
    yScale.domain([0, d3.max(data,function (d) { return d.Women; }) ]); 

    svg.selectAll('rect') 
     .data(data) 
     .enter() 
     .append('rect') 
     .attr ({ 
      "x": function(d) { return xScale(d.State); }, 
      "y": function(d) { return yScale(d.Women); }, 
      "height": xScale.rangeBand(), 
      "width": function(d) { return (width - xScale(d.State)); } 
     }); 

    svg.append("g") 
     .attr("class", "x axis") 
     //.attr("transform", "translate(0," + height +")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .attr("transform", "translate(0," + height +")") 
     .call(yAxis); 
}); 

Başlamak için, sadece kadın verilerini kullanıyorum, erkekleri daha sonra nasıl yerleştireceğimi anlarım. Şu anda daha büyük sorun formatlama; Resimde gördüğünüz gibi, çubuklar birbirine yakın ve ekranın alt kısmına çok yakındır ve çubuklar solun yerine ekranın sağında başlar. Kimse benim kodumda grafiğin bu şekilde görünmesine neden olan yanı sıra, ikinci çubukların yanı sıra çubuklara renk ekleme konusunda bana tavsiyede bulunabiliyor mu? Teşekkürler. Grafiğin

Resim:

Answer 1

ana sorunu gibi görünüyor sizin rect nitelikleri karışık olmasıdır. , Sen çok daha iyi sonuçlar olacak aşağıdakileri kullanmayı deneyin:

svg.selectAll('rect') 
    .data(data) 
    .enter() 
    .append('rect') 
    .attr ({ 
     "x": 0, 
     "y": function(d) { return xScale(d.State); }, 
     "height": xScale.rangeBand(), 
     "width": function(d) { return (yScale(d.Women)); } 
}); 

Akıl Yürütme:

değeri sıfırda sabit olmalıdır

• x yüzden eksenli hatlar kadar
• y değeri kapalı dayalı olmalıdır xScale ve State özelliğiniz. Ölçek adlarınız
• width çevrildikten bu yana kafa karıştırıcı, Women özelliğini kullanarak x ekseni (yScale) olmalıdır.