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

wxgz9201 8年前

来自： 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 )