D3.js 为什么不是'；我的文本是否显示在svg轴标签中？（D3保证金惯例）

这是一个散点图，显示了啤酒的酒精含量（x）和IBU（y）。我无法显示轴标签。我检查了DOM，文本在树中，但由于某种原因，它没有显示在屏幕上

对于y标签，边距似乎不起作用，而对于x标签，它位于我想要的位置，但我根本看不到任何文本

const数据文件=['https://raw.githubusercontent.com/inspectordanno/beer_components/master/scatterplot/data/beers.csv', 'https://raw.githubusercontent.com/inspectordanno/beer_components/master/scatterplot/data/breweries.csv']; //要分析的数据文件
常量承诺=[]//将包含承诺的空数组
dataFiles.forEach（url=>{
promises.push（d3.csv（url））；//这将解析每个csv文件并将其推送到数组中
});
//绘图的尺寸和边距
常量边距={
前10名，
右:30,，
底数：30，
左：60
},
宽度=960-margin.left-margin.right，
高度=500-页边距.顶部-页边距.底部，
填充=30；
const svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
然后（data=>{//这里，我将Promise中的两个数组组合成一个大的beer对象数组
数据[0]。forEach（啤酒=>{
const breweryid=beer.brewery\u id；
数据[1]。forEach（brewery=>{
if（parseInt（breweryid）=parseInt（brewery.id））{
beer.brewery_name=brewery.name；
beer.brewery_city=brewery.city；
beer.brewery\u state=brewery.state；
}
});
});
让啤酒=数据[0]；//啤酒数据
常量xScale=d3.scaleLinear（）
.domain（[0，d3.max（beers，d=>d.abv）]）
.范围（[填充，宽度-填充*2]）；
常量yScale=d3.scaleLinear（）
.domain（[0，d3.max（beers，d=>d.ibu）]）
.范围（[高度-填充，填充]）；
const xAxis=d3.axisBottom（）
.scale（xScale）
.滴答声（10）//问问史蒂文
.tickFormat（d3.format（'，.1%'）；
常量yAxis=d3.axisLeft（）
.刻度（yScale）
.滴答声（10）；//问问史蒂文
//.tickFormat
svg.selectAll（'circle'））
.数据（啤酒）
.输入（）
.append（'圆'）
.attr（'cx'，d=>{
返回xScale（d.abv）；
})
.attr（'cy'，d=>{
返回yScale（d.ibu）；
})
.attr（'r'，1）
.attr（'fill'，'steelblue'）
.on（'mouseover'，d=>console.log（d））
//创建X轴
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（高度填充）+”）
.呼叫（xAxis）；
//x轴的文本标签
svg.append（“文本”）
.attr（“transform”，`translate（${（宽度/2）}，${height+margin.top*4}）`）
.style（“文本锚定”、“中间”）
.文本（“酒精体积”）；
//y轴的文本标签
svg.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（'y'，0-margin.left*.75）
.attr（'x'，0-（高度/2））
.style（“文本锚定”、“中间”）
.文本（“IBU”）
//创建Y轴
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+padding+”，0）”）
.呼叫（yAxis）；
})//结束。然后是承诺
.catch（err=>console.log（err））；//捕获承诺中的错误

---

处理边距、尺寸、填充和翻译的方式毫无意义。例如，您可以设置

margin

对象的属性，但SVG的宽度和高度只需减去这些值

我个人既不是该模式的用户，也不是该模式的粉丝（Mike Bostock称之为该模式），但你可以这样做：

首先，像您所做的那样设置边距，并定义

宽度

和

高度

。然后，添加用于设置SVG维度的边距：

.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)

最后，添加一个

元素，使用

margin.left

和

margin.top

对其进行翻译：

.append("g")
.attr("transform", "translate(" + margin.left + ","+ margin.top + ")");

以下是您的代码和更改（以及更改轴的平移）：

const数据文件=['https://raw.githubusercontent.com/inspectordanno/beer_components/master/scatterplot/data/beers.csv', 'https://raw.githubusercontent.com/inspectordanno/beer_components/master/scatterplot/data/breweries.csv']; //要分析的数据文件
常量承诺=[]//将包含承诺的空数组
dataFiles.forEach（url=>{
promises.push（d3.csv（url））；//这将解析每个csv文件并将其推送到数组中
});
//绘图的尺寸和边距
常量边距={
前10名，
右:30,，
底数：200，
左：100
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
const svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
然后（data=>{//这里，我将Promise中的两个数组组合成一个大的beer对象数组
数据[0]。forEach（啤酒=>{
const breweryid=beer.brewery\u id；
数据[1]。forEach（brewery=>{
if（parseInt（breweryid）=parseInt（brewery.id））{
beer.brewery_name=brewery.name；
beer.brewery_city=brewery.city；
beer.brewery\u state=brewery.state；
}
});
});
让啤酒=数据[0]；//啤酒数据
常量xScale=d3.scaleLinear（）
.domain（[0，d3.max（beers，d=>d.abv）]）
.范围（[0，宽度]）；
常量yScale=d3.scaleLinear（）
.domain（[0，d3.max（beers，d=>d.ibu）]）
.范围（[高度，0]）；
const xAxis=d3.axisBottom（）
.scale（xScale）
.滴答声（10）//问问史蒂文
.tickFormat（d3.format（'，.1%'）；
常量yAxis=d3.axisLeft（）
.刻度（yScale）
.滴答声（10）；//问问史蒂文
//.tickFormat
svg.selectAll（'circle'））
.数据（啤酒）
.输入（）
.append（'圆'）
.attr（'cx'，d=>{