D3.js x轴和y轴的问题

我有一些代码可以生成散点图，并使用不同的颜色来说明它们所代表的足球队。伟大的但是，我的x轴和y轴有问题。虽然我对工作代码感到满意，但axis和axis的美学“can”没有对齐，并且“泄漏”出svg。因此，我正在寻找一些帮助，帮助我们如何使x轴和y轴在svg中更整洁、更中心

（需要注意的是，它使用的数据是余弦相似性）

干杯

var数据=[
[0.1457],
[0.22436],
[0.54356],
[0.6634],
[0.893456]
];
常量颜色=d3.scaleOrdinal（）
.域名（数据）
.范围（[“A8A7A7”、“2F9599”、“E8175D”、“474747”、“CC527A”）；
var w=800；
var h=400；
var=5；
var=30；
var xscale=d3.scaleLinear（）
.范围（[0，w]）
.域（[0，1]）；
var yscale=d3.scaleLinear（）
.范围（[h，0]）
.域（[0，1]）；
var svg=d3.select（'body'）
.append（“svg”）
.attr（'宽度'，w）
.attr（'高度'，h）；
var xAxis=d3.axisBottom（）
.scale（xscale）
.蜱（0）；
var yAxis=d3.axisLeft（）
.刻度（yscale）
.蜱（0）；
svg.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，5）
.attr（“cx”，功能（d）{
返回xscale（d[0]）；
})
.attr（“cy”，函数（d）{
返回yscale（d[0]）；
})
.attr（“填充”，功能（d）{
var结果=null；
如果（数据索引f（d）>=0）{
结果=颜色（d）；
}否则{
结果=“白色”；
}
返回结果；
});
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“翻译（25）”+（h-xPadding）+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+yPadding+”，15）”）
.呼叫（yAxis）
第一个必要的更改是使用衬垫设置两个秤的范围。这里我假设
xPadding
指的是x轴上的填充，而
yPadding
指的是y轴上的填充。除此之外，让我们为两个轴的末端创建一个
填充

也就是说，这些应该是天平：

var xscale = d3.scaleLinear()
    .range([xPadding, w - padding])
    .domain([0, 1]);

var yscale = d3.scaleLinear()
    .range([h - yPadding, padding])
    .domain([0, 1]);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - yPadding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + xPadding + ",0)")
    .call(yAxis);

之后，必须定位轴的组。不要使用魔法数字，只需在天平上使用相同的填充物：

var xscale = d3.scaleLinear()
    .range([xPadding, w - padding])
    .domain([0, 1]);

var yscale = d3.scaleLinear()
    .range([h - yPadding, padding])
    .domain([0, 1]);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - yPadding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + xPadding + ",0)")
    .call(yAxis);

以下是这些更改的演示，使用5个记号：


var数据=[
[0.1457],
[0.22436],
[0.54356],
[0.6634],
[0.893456]
];
常量颜色=d3.scaleOrdinal（）
.域名（数据）
.范围（[“A8A7A7”、“2F9599”、“E8175D”、“474747”、“CC527A”）；
var w=800；
var h=400；
var=30；
var=20；
var=10；
var xscale=d3.scaleLinear（）
.range（[xPadding，w-padding]）
.域（[0，1]）；
var yscale=d3.scaleLinear（）
.range（[h-yPadding，padding]）
.域（[0，1]）；
var svg=d3.select（'body'）
.append（“svg”）
.attr（'宽度'，w）
.attr（'高度'，h）；
var xAxis=d3.axisBottom（）
.scale（xscale）
.蜱（5）；
var yAxis=d3.axisLeft（）
.刻度（yscale）
.蜱（5）；
svg.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，5）
.attr（“cx”，功能（d）{
返回xscale（d[0]）；
})
.attr（“cy”，函数（d）{
返回yscale（d[0]）；
})
.attr（“填充”，功能（d）{
var结果=null；
如果（数据索引f（d）>=0）{
结果=颜色（d）；
}否则{
结果=“白色”；
}
返回结果；
});
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换（0）”+（h-yPadding）+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+xPadding+”，0）”）
.呼叫（yAxis）
谢谢你。。。我只有一个问题，当调用xAxis和yAxis时，为什么要为xAxis使用yPadding变量，为yAxis使用xPadding变量？因为
yPadding
定义了y轴上的填充，而
xPadding
定义了x轴上的填充。D3中的所有轴都在原点处创建，然后必须移动它们。在y方向上垂直移动x轴，在x方向上水平移动y轴。