Question

有没有办法根据我的数据对象的某个属性调用轴？我想放置一个＆x; x轴＆＃39;在顶部，对应于每列的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);

也许我正在考虑这个错误。有没有办法在主数据追加之外添加轴？

Answer 1

您必须在<g>元素上调用轴：

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, 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 scale = d3.scalePoint().domain(['Matrix', 'Alien', 'Serenity', 'Casablanca', 'Amelie'])
.range([15, 215]);
 

var axis = d3.axisTop(scale);

var gX = svg.append("g")
  .attr("transform", "translate(0,20)");
  
axis(gX);

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)
                })

path{
stroke:none;
}

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

根据数据属性之一调用轴

1 个答案: