为什么我的D3轴标签被压扁了？

Question

我正在尝试在y轴上创建带有序数类别的d3散点图。我的问题是代表序数类别的字母似乎是相互叠加的。我希望它们看起来像完整的单词。

我将margin.left的值从100增加到300，希望这会扩大图形和svg容器左边缘之间的空间。这将图形和边距都移动了300，如图所示，边距仍然很窄。

我尝试过的其他事情：

• 将.tickFormat（function（d，i）{return name [i]}）添加到最后一行
• 删除其他＆＃39; margin.left＆＃39;在代码中。

＆＃13;

＆＃13;

var data = [
  [50, 30],
  [100, 170],
  [15, 40],
  [20, 80]
];
var name = ["maggie", "milly", "molly", "may"];
var margin = {
    top: 20,
    right: 150,
    bottom: 60,
    left: 100
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var x = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d[0];
  })])
  .range([0, d3.max(data, function(d) {
    return d[0];
  })])

var y = d3.scaleOrdinal()
  .domain(name)
  .range([30, 170, 40, 80]);

var yAxis = d3.axisLeft(y);
var xAxis = d3.axisBottom(x);


var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("cx", function(d) {
    return d[0];
  })
  .attr("cy", function(d) {
    return d[1];
  })
  .attr("r", 5);

var chartGroup = svg.append("g");


chartGroup.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x).ticks(5));
chartGroup.append("g").attr("class", "y axis hidden").call(d3.axisLeft(y).ticks(5));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个有趣且不寻常的问题。这里的问题只是你不幸选择的名字（没有双关语），即name。

尽管不是保守字，但使用name时可能会发生奇怪的事情。看看这个片段：

＆＃13;

＆＃13;

var svg = d3.select("svg");
var name = ["alice", "bernard", "chris"];
var scale = d3.scalePoint()
  .domain(name)
  .range([20, 280]);
var axis = d3.axisBottom(scale)(svg.append("g")
  .attr("transform", "translate(0,50)"));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

重现您的问题。

现在，我们只需致电name其他内容，例如anotherName：

＆＃13;

＆＃13;

var svg = d3.select("svg");
var anotherName = ["alice", "bernard", "chris"];
var scale = d3.scalePoint()
  .domain(anotherName)
  .range([20, 280]);
var axis = d3.axisBottom(scale)(svg.append("g")
  .attr("transform", "translate(0,50)"));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您想进一步研究this issue，可能会给您一个提示：

＆＃13;

＆＃13;

console.log(name)

＆＃13;

＆＃13;

＆＃13;

提示：我从未在上面的代码段中定义name。