Question

您好我正在尝试使用v4为d3中的折线图设置序数比例。由于某些原因，虽然我已经按比例调整了刻度，但刻度不能正确缩放：

var yTicks = d3.scaleOrdinal()
.domain(["apple", "orange", "banana", "grapefruit", "mango"])
.range([0, h])

var xAxis = d3.axisBottom().scale(x).tickSize(-h);

// var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
var yAxisLeft = d3.axisLeft().scale(yTicks);
// Add the x-axis.
graph.append("svg:g").attr("class", "x axis").attr("transform", "translate(0," + h + ")").call(xAxis);



// add lines
 // do this AFTER the axes above so that the line is above the tick-lines
for (var i = data.length - 1; i >= 0; i--) {
    graph.append("svg:path").attr("d", line(data[i])).attr("class", "data" + (i + 1));
};        

graph.append("svg:g").attr("class", "y axis").attr("transform", "translate(0,0)").call(yAxisLeft);

我可以在这个小提琴上找到我完成的完整版本：https://jsfiddle.net/5g1fe6qd/

Answer 1

您不能像在此处那样设置序数比例的范围：您必须指定离散值。

使用点比例的简单解决方案：

var yTicks = d3.scalePoint()

这是您更新的小提琴：https://jsfiddle.net/5g1fe6qd/1/

Answer 2

这是预期的行为：

ordinal.range（[范围]）

如果指定了范围，则将序数标度的范围设置为   指定的值数组。域中的第一个元素是   映射到范围中的第一个元素，第二个域值为   第二个范围值，依此类推。 如果元素中的元素较少   范围比在域中，范围将从一开始就重用值   范围。如果未指定范围，则此方法返回   当前范围。

（强调我的，来自API documentation）

您只在指定范围内指定了两个元素，因此，您域中的五个值会映射到范围内的这两个值（因此重叠文本）。你可以沿着这些方向使用：

  d3.scaleOrdinal()  
    .domain(["apple", "orange", "banana", "grapefruit", "mango"])
    .range([0, h*0.25, h*0.5, h*0.75, h]

（小提琴：https://jsfiddle.net/bmysrmcd/）

然而，Gerardo的answer提供了一种替代方案，它不需要您将域中的每个元素映射到范围，这是一个更好的解决方案。

D3版本4中y轴的文本标签

2 个答案:

ordinal.range（[范围]）