代码之家 › 专栏 › 技术社区 › kPow989

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

d3.js

kPow989 · 技术社区 · 7 年前

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/

2 回复 | 直到 7 年前

Gerardo Furtado 7 年前

不能像这里那样设置序数比例的范围:必须指定离散值。

var yTicks = d3.scalePoint()

https://jsfiddle.net/5g1fe6qd/1/

Andrew Reid 7 年前

这是预期行为:

序号范围([范围])

如果指定了范围,则将序数比例的范围设置为指定的值数组。域中的第一个元素是第二个范围值,依此类推。 如果范围大于域中的范围,比例将从一开始就重用值 电流范围。

(emphasis mine,来自 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/ )

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

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

2 年前

user6456564 · 双条形图创建

6 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

6 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

6 年前

MTT · 最适合散点图的回归

6 年前

Cyley Simon · 以chile/name格式将Csv转换为json

6 年前

Himani · 线图和面积图之间的颜色不同

6 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

6 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

6 年前