Javascript 映射顺序y轴d3的数组
我试图用d3绘制散点图,但y轴的区域让我困惑。y轴显示患者姓名,x轴显示预约日期。x轴工作正常,但y轴仅显示两个患者姓名Javascript 映射顺序y轴d3的数组,javascript,d3.js,axis,ordinal,Javascript,D3.js,Axis,Ordinal,我试图用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().ra
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(患者姓名)正确显示姓名:
`["Andrew","Fred","Steve","John"]`
console.log(y.domain())显示一个额外的未定义对象:
["Andrew", "Fred","Steve" , "John", undefined]
但y轴仅显示高度为0的Andrew和高度为h的Fred。如何显示所有四个名称?我不能硬编码它们,因为它们是用户输入值。顺便说一句:我是d3和js的初学者
提前谢谢 对于顺序刻度,您需要明确定义输入的范围点(请参阅)。也就是说,您需要明确地告诉比例将哪个输入值映射到哪个输出。例如:
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()
正常工作,您需要将域设置在输出范围之前。我是在尝试解决方案时得到的:TypeError:“undefined”不是一个函数(计算'd3.scale.ordinal().domain(患者名称)。rangePoint([height,0])抱歉,输入错误--应该是.rangePoints
。我会解决的。