折れ線グラフの文字列値（テキスト）からx座標を作成する

Question

私は本当にd3を学ぶのが大変なので、この質問で私を助けてくれることを願っています。私は、そのデータに数値があるので、y座標のsvgにデータを拡大縮小またはマップする方法を考え出しました。私はそれをどのように下に示すでしょう。しかし、xの値については、1mo、2mo、3moなどのような数字だけの数字はありません。これらを折れ線グラフのx座標に変換したいと思います。それらは、グラフの幅に沿って均等に分散する必要があります。うまくいけば、私はx座標を得る方法を教えてくれるので、ラインジェネレータを使ってパスを作成することができます。

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

あなたはd3.scale.ordinalを探しています：

順序尺度は、そのような名前や カテゴリのセットとして、個別のドメインを持っています。

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>