从线图的字符串值(文本)生成x坐标

Question

我真的很努力学习d3，所以我希望你能帮我解决这个问题。我想出了如何将数据缩放或映射到y坐标的svg，因为该数据有数字。我会告诉你我是怎么做到的。但是对于x值，没有数字，只有1mo，2mo，3mo ..etc这样的文本。我想把这些转换成线图的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>

​