yAxis没有出现

Question

在下面的代码中，我创建并调用x和y轴d3元素作为svg组：

var svg = d3.select("#right-section").append("svg").attr("width",600).attr("height",600);
var flatInputMatrix = [1,1,1,0,0,3,3,3,0,0,4,4,4,0,0,5,5,5,0,0,0,2,0,4,4,0,0,0,5,5,0,1,0,2,2];
var m = 5;
var r = 3;    

var counter = -1;

var data = flatInputMatrix.map(function(d, i) {
  i % m === 0 ? counter++ : null;
  return {
    column: i % m,
    row: counter,
    value: d
  };
});

var scaleX = d3.scalePoint().domain(['Matrix', 'Alien', 'Serenity', 'Casablanca', 'Amelie'])
.range([15, 220]);

var scaleY = d3.scalePoint().domain(['User 1', 'User 2', 'User 3', 'User 4', 'User 5', 'User 6', 'User 7'])
.range([15, 370]);

var xAxis = d3.axisTop(scaleX);
var yAxis = d3.axisLeft(scaleY);

var gX = svg.append("g")
  .attr("transform", "translate(0,20)")
  .attr("class", "xAxis")
  .call(xAxis);

var gY = svg.append("g")
  .attr("transform", "translate(10,0)")
  .attr("class", "yAxis")
  .call(yAxis);

var numbers = svg.selectAll("numbers").data(data).enter().append("text")
    .attr("x",function(d,i) { return (i % m)*50 + 10 + r; })
    .attr("y",function(d,i) { return Math.floor(i / m) *50+50; })
    .style("opacity", function(d) {
        if (d.value > 0) {return 1}
        else {return 0.4} 
    })
    .text(function(d) { return d.value; })
    .on("mouseover", function(d) {
        var column = d.column;
        var row = d.row;
        numbers.filter(function(d) {
            return d.column === column
        })
    })

这里的xAxis呈现得很完美，但我没有看到yAxis。对该区域的检查表明，元素在那里，控制台没有显示错误。下面也是供参考的css：

.xAxis path,
.xAxis line,
.yAxis path,
.yAxis line  {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
}

.xAxis text {
    font-family: sans-serif;
    font-size: 11px;
    color: red;
}

.yAxis text {
    font-family: sans-serif;
    font-size: 11px;
    color: green;
}

Answer 1

您的y-axis正在创建，但由于您的元素现在的定位方式，所以被塞在左边。我做了一些小的改变，使不同元素的定位更好。你可以根据你的需要进一步调整。

1. 更新了y-scale的范围，以使其与矩阵text元素的定位相匹配 var scaleY =d3.ScalePoint().domain(“用户1”、“用户2”、“用户3”、“用户4”、“用户5”、“用户6”、“用户7”) .range(45,350)；
2. 把Y轴进一步推到右边 var gY = svg.append("g") .attr(“转换”，“翻译( 60，0)”)//按右推从60 .attr("class"，"yAxis") .call(YAxis)开始；
3. 添加一些填充到您的文本元素时，他们被追加，以便他们正确地对齐。 变量数= svg.selectAll("numbers").data(data).enter().append("text") .attr("x"，函数(d，i) {返回(i % m)*50 + 10 +r+ 80；}) //加法填充80

JSFiddle - https://jsfiddle.net/a8hqb08y/

我建议使用空白处，以便更灵活地定位元素，这样你就不用担心被切断的东西了。