Chess-dataviz – 专为D3.js编写的棋牌可视化库

wxgz9201 4年前

来自: http://ebemunk.github.io/chess-dataviz/

Methods

constructor(selector, [ options ], [ data ])

</tbody> </table>

data(data)

Set or change the data of the graph. This method will automatically call update() . The data format needs to be the same as the one that the constructor accepts.

options(options)

Change graph options. This method will automatically call update() . You can change all the options as described in constructor except width and margin .

update()

Updates and re-draws the graph. You shouldn't need to call this under normal circumstances.

Properties

container

Holds the reference to the DOM object containing the <svg> element. Same object as if you had called d3.select(selector) .

dataContainer

Holds the reference to the <g> element containing the data elements

dispatch

d3 event dispatcher. You can hook your event handler to this property to listen to graph events.

Events

The events are dispatched via this.dispatch .

mouseenter

Will fire when mouse enters a heat square. The handler will be passed the current data (count) for the square.

mousemove

Will fire when mouse moves around a heat square.

mouseleave

Will fire when mouse leaves a heat square.

CSS

The CSS classes for styleable elements of the heatmap.

.white rect
white chess board square
.white .label
white chess board square label (file or rank label)
.black rect
black chess board square
.black .label
black chess board square label (file or rank label)
.heat-square
rect corresponding to a heat square
</div>

argument description
selector DOM selector that you would pass to d3.select()
options options configuration object
width
total width of the svg element
margin
margins around the chess board, hence the total width of the chess board will be width - 2 * margin
accessor

the accessor keys for piece and color. this will define what parts of the data is being shown on the heatmap. valid values:

piece: all, k, q, r, b, k, p

color: w, b

sizeScale
scale the size of the heatmap squares depending on the data value
colorScale
color the heatmap squares depending on the data value, optionally, you can pass an array of 2 colors to interpolate such as ['yellow', 'red'] . If set to true, but not supplied an array, the default interpolation is ['blue', 'red'] .
</dl> </td> </tr>
data data formatted as:

The data consists of an array of 64 elements (only 2 shown in the example above) representing the squares, from top-left to bottom-right in row order ( a8, b8, c8 ... ,f1, g1, h1 )