数组映射序数y轴d3

Question

我想开发一个使用d3的散点图，但y轴的域令我困惑。 y轴将显示患者姓名，x轴显示他们的约会日期。 x轴工作正常，但y轴只显示两个患者姓名。

function graph() { 

    var num_patient = Object.keys(patientList).length; 
    var patient_names = Object.keys(patientList); 
    console.log(patient_names); 

    var x = d3.time.scale().range([0, width]); 
    var y = d3.scale.ordinal().range([height, 0]); 

    x.domain(d3.extent(data, function(d) {return parseDate(d.dates); })); 
    //y.domain(patient_names.map(function(d) { return d.name;})); 
    y.domain(patient_names);  

    console.log(y.domain()); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .ticks(d3.time.year, 1) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var svg = d3.select("#punchcard") 
      .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 + ")"); 

    svg.selectAll("dot") 
      .data(data) 
     .enter() 
     .append("circle") 
      .attr("r", 3.5) 
      .attr("cx", function(d) { return x(d.date); }) 
      .attr("cy", function(d) { return y(d.value); }); 

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

    svg.append("g")   // Add the Y Axis 
      .attr("class", "y axis") 
      .call(yAxis); 
} 

的console.log（patient_names）正确显示的名称：

`["Andrew","Fred","Steve","John"]` 

的console.log（y.domain（））显示一个额外的未定义的对象：

["Andrew", "Fred","Steve" , "John", undefined] 

但y轴仅在0时显示Andrew，在h时显示Fred。我怎样才能显示所有四个名字？因为它们是用户输入值，所以我无法对它们进行硬编码。顺便说一句：我是一个d3和js初学者。

在此先感谢！

Answer 1

使用序数标度，您需要明确定义输入的范围点（请参阅the documentation）。也就是说，您需要明确指出哪个输入值映射到哪个输出。例如：

var y = d3.scale.ordinal() 
      .domain(["Andrew","Fred","Steve","John"]) 
      .range([height, height * 2/3, height * 1/3, 0]); 

你可能想使用.rangePoints()方法，它可让您以指定的时间间隔是D3基于价值观的域名数，自动划分：

var y = d3.scale.ordinal() 
      .domain(["Andrew","Fred","Steve","John"]) 
      .rangePoints([height, 0]); 

注意为使.rangePoints()正常工作，需要在之前设置域的输出范围。