Question

我正在尝试将一组年份转换为xaxis，但是输出给出的是一个十进制值。知道为什么吗？

//We keep an array to store cells for keywords
var keyCells = [];

//A function to check if we already choosed a cell
function checkChoosed( x, y ) {

    if( keyCells.length > 0 ) {
        for( var j = 0; j < keyCells.length; j++ ) {

            if( ( keyCells[ j ].x == x ) && ( keyCells[ j ].y == y ) ) return 1;

        }

    }

    return 0;

}

//Pick random coordinates (in 6x6 square) for cells
function randomCells() {

    var choosed = 0;

    while( choosed < 5 ) {

        var x = Math.round( Math.random() * 5 ) + 1; //Math.random returns a number between 0 and 0.99, so * 5 to get from 0 to 4.95, + 1 because we skip first row and column of the grid
        var y = Math.round( Math.random() * 5 ) + 1;

        if( !checkChoosed( x, y ) ) {

            keyCells.push( { x: x, y: y } );
            choosed++;

        }

    }

}

//Now we draw the table and access it for keywords
function drawBoard(rows, cols) {
    var grid = document.getElementById("grid");
    grid.className = 'grid';
    for ( var r = 0; r < rows; r++ ) {
        var row = grid.appendChild(document.createElement('tr'));
        for ( var c = 0; c < cols; c++ ) {
             var cell = row.appendChild(document.createElement('td'));
        }    
    }

    randomCells();

    var trs = document.getElementById('grid').children;

    for( var i = 0; i < keyCells.length; i++ ) {

        var currX = keyCells[ i ].x;
        var currY = keyCells[ i ].y;

        //Here I used the ":nth-child" CSS selector to access "tr" (our Y) and then "td" (our X)

        var currRow = trs[ currY ].children;
        currRow[ currX ].innerHTML = /* your keyword here */

    }

    return grid;

}

我希望x轴可以显示年份，但可以显示值.008，.009，.010，.011，.012

我不确定为什么会这样以及如何更改以显示年份

Answer 1

D3时间刻度通常与Date对象一起使用，但是如果只想使用年份，则可以将tickFormat()链接到x轴：

var xAxis = d3.svg.axis().scale(x).tickFormat(d3.time.format("%Y"));

然后将域分配给x比例尺时，映射数据集以从year创建Date对象：

var x = d3.time.scale().domain(d3.extent(years, function(d) {
  return new Date(parseInt(d.year), 0);
})).range([0, width]);
var xAxis = d3.svg.axis().scale(x).tickFormat(d3.time.format("%Y")).ticks(years.length);

Here's a pen，x轴显示年份。

将D3年映射到x轴

1 个答案: