D3.js 基于以下数据之一调用轴'；s属性

有没有办法根据我的数据对象的某个属性调用axis？我想在顶部放置一个“x轴”，它对应于我的每一列的5个记号

var scale = d3.scaleOrdinal().domain(['Matrix', 'Alien', 'Serenity', 'Casablanca', 'Amelie']);
        console.log(scale);


var axis = d3.axisLeft(scale);
            console.log(axis);


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", 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 || d.row === row
                    })
                .style("opacity", 1)
                }).on("mouseout", function() {
                    numbers.style("opacity", 0.5)
                }) 
                .call(axis);

---

也许我想错了。是否有方法将轴添加到主数据附加之外？

您必须在

元素上调用轴：

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

这与：

axis(gX);

除此之外，我相信您想要的是

axisTop

，而不是

axisLeft

以下是演示：

var svg=d3.select（“body”）.append（“svg”）.attr（“width”，600）.attr（“height”，600）；
var flatInputMatrix=[1,1,1,0,0,3,3,0,0,4,4,4,0,0,5,5,5,0,0,0,2,0,4,4,0,0,0,0,0,5,5,0,1,0,2]；
var m=5；
var r=3；
var计数器=-1；
var数据=flatInputMatrix.map（函数（d，i）{
i%m==0？计数器++：空；
返回{
列：i%m，
排：柜台，
价值：d
};
});
var scale=d3.scalePoint（）.domain（['Matrix'，'Alien'，'Serenity'，'Casablanca'，'Amelie']）
.范围（[15215]）；
var轴=d3.轴顶（刻度）；
var gX=svg.append（“g”）
.attr（“转换”、“翻译（0,20）”）；
轴（gX）；
var numbers=svg.selectAll（“数字”）.data（数据）.enter（）.append（“文本”）
.attr（“x”，函数（d，i）{返回（i%m）*50+10+r；}）
.attr（“y”，函数（d，i）{返回数学层（i/m）*50+50；}）
.样式（“不透明度”，0.4）
.text（函数（d）{返回d.value；}）
.on（“鼠标悬停”，功能（d）{
var列=d列；
var行=d行；
数字。过滤器（功能（d）{
返回d.column==列| | d.row==行
})
.style（“不透明度”，1）
}).on（“mouseout”，函数（）{
数字。样式（“不透明度”，0.5）
})

路径{
中风：无；
}