x和y轴问题

Question

我有一些代码可以生成散点图，并使用不同的颜色来说明它们所代表的足球队。大。但是，我在x和y轴上遇到问题。尽管我对工作代码感到满意，但两个轴的美观性可能无法保持一致，并且无法从svg中“泄漏”。因此，我正在寻求有关如何使x和y轴更整齐并在svg内更居中的帮助。

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

欢呼

var data = [
  [0.1457],
  [0.22436],
  [0.54356],
  [0.6634],
  [0.893456]
];

const colours = d3.scaleOrdinal()
  .domain(data)
  .range(["#A8A7A7", "#2F9599", "#E8175D", "#474747", "#CC527A"]);

var w = 800;
var h = 400;
var xPadding = 5;
var yPadding = 30;

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

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

var svg = d3.select('body')
  .append("svg")
  .attr('width', w)
  .attr('height', h);

var xAxis = d3.axisBottom()
  .scale(xscale)
  .ticks(0);

var yAxis = d3.axisLeft()
  .scale(yscale)
  .ticks(0);

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cx", function(d) {
    return xscale(d[0]);
  })
  .attr("cy", function(d) {
    return yscale(d[0]);
  })
  .attr("fill", function(d) {
    var result = null;

    if (data.indexOf(d) >= 0) {
      result = colours(d);
    } else {

      result = "white";
    }
    return result;
  });

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

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

<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 1

第一个必要的更改是使用填充设置两个刻度的范围。在这里，我假设std::byte是指x轴上的填充，而xPadding是指y轴上的填充。除了这些，让我们为两个轴的末端创建一个yPadding。

话虽如此，这些应该是尺度：

padding

在那之后，您必须放置轴的组。不要使用魔术数字，只需在秤中使用相同的填充即可：

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

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

下面是带有这些更改的演示，使用5个滴答声：

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 data = [
  [0.1457],
  [0.22436],
  [0.54356],
  [0.6634],
  [0.893456]
];

const colours = d3.scaleOrdinal()
  .domain(data)
  .range(["#A8A7A7", "#2F9599", "#E8175D", "#474747", "#CC527A"]);

var w = 800;
var h = 400;
var xPadding = 30;
var yPadding = 20;
var padding = 10;

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

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

var svg = d3.select('body')
  .append("svg")
  .attr('width', w)
  .attr('height', h);

var xAxis = d3.axisBottom()
  .scale(xscale)
  .ticks(5);

var yAxis = d3.axisLeft()
  .scale(yscale)
  .ticks(5);

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cx", function(d) {
    return xscale(d[0]);
  })
  .attr("cy", function(d) {
    return yscale(d[0]);
  })
  .attr("fill", function(d) {
    var result = null;

    if (data.indexOf(d) >= 0) {
      result = colours(d);
    } else {

      result = "white";
    }
    return result;
  });

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);