css - 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 轴，但由于您的元素现在的定位方式，它被挤到了左边。我做了一些小改动，使不同元素的位置更好。您可以根据需要进一步调整。

1. 更新了 y-scale 的范围以将其缩小以匹配矩阵 text 元素的位置

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

2. 将 Y 轴进一步向右推

   var gY = svg.append("g")
     .attr("transform", "translate(60,0)") //pushed right to start at 60
     .attr("class", "yAxis")
     .call(yAxis);
   

3. 在附加文本元素时向它们添加了一些填充，以便它们正确对齐。

   var numbers = svg.selectAll("numbers").data(data).enter().append("text")
           .attr("x",function(d,i) { return (i % m)*50 + 10 + r + 80; }) //added padding of 80 
   

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

附言我建议使用边距来提高定位元素的灵 active ，这样您就不必担心会被切断。