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

更新了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]);

将Y轴进一步推向右侧

var gY = svg.append("g")
  .attr("transform", "translate(60,0)") //pushed right to start at 60
  .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 + 80; }) //added padding of 80

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

P.S。我建议使用边距来提高定位元素的灵活性，这样你就不必担心被切断的东西了。

yAxis没有出现

1 个答案: