如何在D3绘制棋盘？ [英] How to draw a chess board in D3?
本文介绍了如何在D3绘制棋盘？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在D3画一个棋盘：
我会满意的只能绘制初始游戏位置（如上所述）。
可能的情况是，人们不需要国王，皇后，骑士等的图像文件（有12个不同的部分），因为它们都是< a href =http://en.wikipedia.org/wiki/Chess_symbols_in_Unicode =nofollow noreferrer> Unicode 作为编码点2654-265F：
Unicode字符出现在任何现代浏览器：
♔♕♖♗♙♙
♚♛♜♝♞♟
维基百科上的Unicode象棋符号：
任何指针或帮助非常感谢。
解决方案
这里是 codepen 。
CODE WALKTROUGH
棋子：
var pieces = {
NONE：{name：None，code：
WHITE_KING：{name：White King，code：\\\♔}，
WHITE_QUEEN：{name：White Queen，code：\\\♕}，
WHITE_ROOK：{name：White Rook，code：\\\♖}，
WHITE_BISHOP：{name：White Bishop，code：\\\♗}，
WHITE_KNIGHT：{name ：White Knight，code：\\\♘}，
WHITE_POWN：{name：White Pown，code：\\\♙}，
BLACK_KING：{name：Black King ，代码：\ u265A}，
BLACK_QUEEN：{name：Black Queen，code：\\\♛}，
BLACK_ROOK：{name：Black Rook \\\♜}，
BLACK_BISHOP：{name：Black Bishop，code：\\\♝}，
BLACK_KNIGHT：{name：Black Knight，code：\\\♞ }，
BLACK_POWN：{name：Black Pown，code：\\\♟}，
};
电路板初始化：
var board = [];
for（var i = 0; i< boardDimension * boardDimension; i ++）{
board.push（{
x：i％boardDimension，
y： floor（i / boardDimension），
piece：pieces.NONE
}）;
};
board [0] .piece = pieces.BLACK_ROOK
board [1] .piece = pieces.BLACK_KNIGHT
board [2] .piece = pieces.BLACK_BISHOP
板[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] = 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
绘制方格：
svg.append（rect）
.style class，fields）
.style（class，rects）
.attr（x，function（d）{
return dx * fieldSize;
}）
.attr（width，fieldSize + px）
.attr（height，fieldSize +px）
.style（fill，function（d）{
if（（dx％2 == 0）&（dy％2 == 0））||
（（dx％2 == 1）&（dy％2 == 1）））
return米色;
else
returntan;
}）;
使用Unicode字符绘制件：
svg.append（text）
.attr（x，function（d）{
return dx * fieldSize;
}）
.attr（y，function（d）{
return dy * 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;
}）;
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屋！
查看全文
