d3.js D3：将替代字段用于带scaleBand的轴标签

2ledvvac 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(121)

我正在处理数据集中的D3（V5）图表，该数据集同时包含JobCode（唯一）和JobTitle（不唯一）。我需要使用JobCode作为坐标轴，但希望将JobTitle显示为标签。

相关代码：

const xScale = d3.scaleLinear().domain([0,d3.max(grouped, d => d.jobCodeMax)-d3.min(grouped, d => d.jobCodeMax)]).range([0,width-margin.left-margin.right]);
const yScale = d3.scaleBand().domain(grouped.map(d => d.all[0].jobCode)).range([0,height - margin.top - margin.bottom]).padding(0.3);
const yAxis = d3.axisLeft(yScale);
const xAxis = d3.axisTop(xScale);
const radius = yScale.bandwidth()/2.75
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`)

yAxis(g.append("g"));
xAxis(g.append("g"));

我可以使用d.jobTitle访问jobTitle。
我的初步计划是放弃d3.axisLeft()函数并绘制我自己的函数。有没有更直接的方法？比如给d3.axisLeft()指定一个参数，在其中指定一个替换字段？
谢谢你的真知灼见。

d3.js

来源：https://stackoverflow.com/questions/73280118/d3-use-an-alternate-field-for-axis-labels-with-scaleband

1条答案

按热度按时间

bmvo0sr51#

d3.scaleBand的域：
...域值被存储在InternMap内部从基元值到索引;因此，带标度的值必须可强制为原始值，并且原始域值唯一标识对应的带......
InternMap扩展了一个标准的Map对象，因此我们可以看到，scaleBand的domain中的值需要是唯一的。
要获得所需的结果，您可以在渲染轴后将文本值切换为jobTitle*，例如：

// replace text values on y axis
yLabels = d3.selectAll(".yaxis g text");
yLabels.each(function(d, i) { d3.select(this).text(data[i].alias) });

使用箭头函数时，等效函数为：

// arrow function way
yLabels = d3.selectAll(".yaxis g text");
yLabels.each((d, i, n) => d3.select(n[i]).text(data[i].alias))

工作示例如下：
第一个

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js D3：将替代字段用于带scaleBand的轴标签

1条答案

相关问题

热门标签

最新问答