Çizgi grafik için dize değerlerinden (metin) x koordinatlarının yapılması

Question

Gerçekten d3'ü öğrenmek için çok uğraşıyorum bu yüzden bu soruya bana yardımcı olabileceğinizi umuyorum. Verilerin sayıları olduğundan, s koordinatının svg için verileri nasıl ölçekleyeceğimi veya eşleyeceğimi düşündüm. Bunu nasıl yaptığımı aşağıda göstereceğim. Fakat x değerleri için 1mo, 2mo, 3mo ..etc gibi bir metin yoktur. Bunları çizgi grafik için x koordinatlarına dönüştürmek istiyorum. Grafiğin genişliği boyunca eşit olarak yayılmalıdırlar. umarım x koordinatlarını nasıl elde edeceğimi gösterirsiniz, böylece yol oluşturucu için çizgi jeneratörü kullanabilirim.

var data = [ 
     {"quarter" : "1mo", "votes" : 400}, 
     {"quarter" : "2mo", "votes": 200}, 
     {"quarter": "3mo", "votes" : 1000}, 
     {"quarter" : "4mo", "votes" : 600} 
    ] 

    var width = 600; 
    var height = 300; 
    //supposed to get the domain ([0, 1000]) 
    var yscale = d3.scale.linear().domain([0, d3.max(data, function(d) {return d.votes})]) 
    yscale.range([height, 0]) 

    console.log(yscale(30)) //291 
    //now I need to get the x cordinates 

Answer 1

Sen d3.scale.ordinal arıyoruz:

Sıra ölçekler tür adları veya kategoriden kümesi olarak, ayrı bir etki alanı var.

var data = [ 
 
    {"quarter" : "1mo", "votes" : 400}, 
 
    {"quarter" : "2mo", "votes": 200}, 
 
    {"quarter": "3mo", "votes" : 1000}, 
 
    {"quarter" : "4mo", "votes" : 600} 
 
], 
 
    width = 600; 
 

 
var x = d3.scale.ordinal() 
 
    .domain(data.map(function(d){ return d.quarter })) //<-- a tick for every quarter 
 
    .rangeBands([0, width], .1); //<-- across the range of our graph with 10% padding on outer ticks 
 

 
console.log(x("1mo")); 
 
console.log(x("4mo"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>