如何在D3中画棋盘? [英] How to draw a chess board in D3?

问题描述

我想在 D3 中画一个棋盘:

我对能够绘制初始游戏位置(如上)感到满意.

可能不需要国王、王后、骑士等的图像文件(有 12 个不同的部分)，因为它们都是

使用 Unicode 字符在终端中显示棋盘的 Python 脚本:

任何指示或帮助将不胜感激.

解决方案

这里是 codepen解决方案.

代码漫游

所有棋子的枚举类型定义:

var 件 = {无:{名称:无"，代码:"}，WHITE_KING : {name: "White King", code: "u2654"},WHITE_QUEEN : {name: "White Queen", 代码: "u2655"},WHITE_ROOK : {name: "White Rook", code: "u2656"},WHITE_BISHOP : {name: "White Bishop", code: "u2657"},WHITE_KNIGHT : {name: "White Knight", code: "u2658"},WHITE_POWN : {name: "White Pown", code: "u2659"},BLACK_KING : {name: "Black King", code: "u265A"},BLACK_QUEEN : {name: "Black Queen", code: "u265B"},BLACK_ROOK : {name: "Black Rook", code: "u265C"},BLACK_BISHOP : {name: "Black Bishop", code: "u265D"},BLACK_KNIGHT : {name: "Black Knight", code: "u265E"},BLACK_POWN : {name: "Black Pown", code: "u265F"},};

电路板初始化:

 var board =[];for(var i = 0; i 

绘制正方形:

 svg.append("rect").style("class", "fields").style("class", "rects").attr("x", 函数 (d) {返回 d.x*fieldSize;}).attr("y", 函数 (d) {返回 d.y*fieldSize;}).attr("宽度", fieldSize + "px").attr("height", fieldSize + "px").style(填充"，功能(d){if ( ((d.​​x%2 == 0) && (d.y%2 == 0)) ||((d.x%2 == 1) && (d.y%2 == 1)) )返回米色"；别的返回 "tan";});

绘图，使用 Unicode 字符:

 svg.append("text").attr("x", 函数 (d) {返回 d.x*fieldSize;}).attr("y", 函数 (d) {返回 d.y*fieldSize;}).style("字体大小", "40").attr(文本锚"，中间").attr("dy", "35px").attr("dx", "20px").text(功能(d){返回 d.piece.code;}).append("标题").text(function(d) {返回 d.piece.name;});

I would like to draw a chess board in D3:

I would be satisfied with just being able to draw the initial game position (as above).

It may be the case that one does not need image files for king, queen, knight, etc. (there are 12 distinct pieces) since they are all part of Unicode as codepoints 2654-265F:

The Unicode characters appear in any modern browser:

♔ ♕ ♖ ♗ ♘ ♙

♚ ♛ ♜ ♝ ♞ ♟

Unicode chess symbols on Wikipedia: here

Python script to display chess board in a terminal using Unicode characters: here. Its result:

Any pointers or help would be much appreciated.

解决方案

Here is the codepen of the solution.

CODE WALKTROUGH

Definition of enumerated type for all chess pieces:

var pieces = {
    NONE :          {name: "None",          code: " "}, 
    WHITE_KING :    {name: "White King",    code: "u2654"}, 
    WHITE_QUEEN :   {name: "White Queen",   code: "u2655"}, 
    WHITE_ROOK :    {name: "White Rook",    code: "u2656"}, 
    WHITE_BISHOP :  {name: "White Bishop",  code: "u2657"}, 
    WHITE_KNIGHT :  {name: "White Knight",  code: "u2658"}, 
    WHITE_POWN :    {name: "White Pown",    code: "u2659"}, 
    BLACK_KING :    {name: "Black King",    code: "u265A"}, 
    BLACK_QUEEN :   {name: "Black Queen",   code: "u265B"}, 
    BLACK_ROOK :    {name: "Black Rook",    code: "u265C"}, 
    BLACK_BISHOP :  {name: "Black Bishop",  code: "u265D"}, 
    BLACK_KNIGHT :  {name: "Black Knight",  code: "u265E"}, 
    BLACK_POWN :    {name: "Black Pown",    code: "u265F"}, 
};    

Board initialization:

    var board =[];

    for(var i = 0; i < boardDimension*boardDimension; i++) {
        board.push({
            x: i % boardDimension,
            y: Math.floor(i / boardDimension),
            piece: pieces.NONE
        });
    };

    board[0].piece = pieces.BLACK_ROOK
    board[1].piece = pieces.BLACK_KNIGHT
    board[2].piece = pieces.BLACK_BISHOP
    board[3].piece = pieces.BLACK_QUEEN
    board[4].piece = pieces.BLACK_KING
    board[5].piece = pieces.BLACK_BISHOP
    board[6].piece = pieces.BLACK_KNIGHT
    board[7].piece = pieces.BLACK_ROOK

    board[8].piece = pieces.BLACK_POWN
    board[9].piece = pieces.BLACK_POWN
    board[10].piece = pieces.BLACK_POWN
    board[11].piece = pieces.BLACK_POWN
    board[12].piece = pieces.BLACK_POWN
    board[13].piece = pieces.BLACK_POWN
    board[14].piece = pieces.BLACK_POWN
    board[15].piece = pieces.BLACK_POWN

    board[6*8 + 0].piece = pieces.WHITE_POWN
    board[6*8 + 1].piece = pieces.WHITE_POWN
    board[6*8 + 2].piece = pieces.WHITE_POWN
    board[6*8 + 3].piece = pieces.WHITE_POWN
    board[6*8 + 4].piece = pieces.WHITE_POWN
    board[6*8 + 5].piece = pieces.WHITE_POWN
    board[6*8 + 6].piece = pieces.WHITE_POWN
    board[6*8 + 7].piece = pieces.WHITE_POWN

    board[7*8 + 0].piece = pieces.WHITE_ROOK
    board[7*8 + 1].piece = pieces.WHITE_KNIGHT
    board[7*8 + 2].piece = pieces.WHITE_BISHOP
    board[7*8 + 3].piece = pieces.WHITE_QUEEN
    board[7*8 + 4].piece = pieces.WHITE_KING
    board[7*8 + 5].piece = pieces.WHITE_BISHOP
    board[7*8 + 6].piece = pieces.WHITE_KNIGHT
    board[7*8 + 7].piece = pieces.WHITE_ROOK

Drawing squares:

    svg.append("rect")
         .style("class", "fields")
         .style("class", "rects")
         .attr("x", function (d) {
             return d.x*fieldSize;
         })
         .attr("y", function (d) {
             return d.y*fieldSize;
         })
         .attr("width", fieldSize + "px")
         .attr("height", fieldSize + "px")
         .style("fill", function (d) {
             if ( ((d.x%2 == 0) && (d.y%2 == 0)) ||
                  ((d.x%2 == 1) && (d.y%2 == 1))    ) 
                 return "beige";
             else
                 return "tan";
         });

Drawing pieces, using Unicode characters:

    svg.append("text")
        .attr("x", function (d) {
            return d.x*fieldSize;
        })
        .attr("y", function (d) {
            return d.y*fieldSize;
        })
        .style("font-size", "40")
        .attr("text-anchor", "middle")
        .attr("dy", "35px")
        .attr("dx", "20px")
        .text(function (d) {
            return d.piece.code;
         })
        .append("title")
        .text(function(d) {
            return d.piece.name;
        });

这篇关于如何在D3中画棋盘?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！