function drawChart(user: PuzzleUserData) {
  const history = Array.from(user.recent.map(x => x[2]))
  const rating = user.rating
  if (rating !== undefined) {
    history.push(rating)
  }
  const data = history.map((x, i) => [i + 1, x])
  const graph = select('#training-graph')
  const margin = {top: 5, right: 20, bottom: 5, left: 35}
  const width = +graph.attr('width') - margin.left - margin.right
  const height = +graph.attr('height') - margin.top - margin.bottom
  const g = graph.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  const xvalues = data.map(d => d[0])
  const scaleX = scaleLinear()
  .domain([Math.min.apply(null, xvalues), Math.max.apply(null, xvalues)])
  .rangeRound([0, width])

  const yvalues = data.map(d => d[1])
  const scaleY = scaleLinear()
  .domain([Math.min.apply(null, yvalues) - 10, Math.max.apply(null, yvalues) + 10])
  .rangeRound([height, 0])

  const area = d3Area()
  .x(d => scaleX(d[0]))
  .y0(height)
  .y1(d => scaleY(d[1]))

  const line = d3Area()
  .x(d => scaleX(d[0]))
  .y(d => scaleY(d[1]))

  const yAxis = axisLeft(scaleY)
  .tickFormat(d => String(d))

  g.datum(data)

  g.append('g')
  .call(yAxis)
  .append('text')
  .attr('class', 'legend')
  .attr('transform', 'rotate(-90)')
  .attr('y', 6)
  .attr('dy', '0.71em')
  .attr('text-anchor', 'end')
  .text(i18n('rating'))

  g.append('path')
  .attr('class', 'path')
  .attr('fill', 'steelblue')
  .attr('stroke', 'steelblue')
  .attr('stroke-linejoin', 'round')
  .attr('stroke-linecap', 'round')
  .attr('stroke-width', 0)
  .attr('d', area)

  g.append('path')
  .attr('class', 'line')
  .attr('d', line)
}

const svg: SVGSVGElement = select<SVGSVGElement, any>('svg').node() !; // mock
const g: SVGGElement = select<SVGGElement, any>('g').node() !; // mock
const canvas: HTMLCanvasElement = select<HTMLCanvasElement, any>('canvas').node() !; // mock

containerElement = svg;
containerElement = g;
// containerElement = canvas; // fails, incompatible type

// --------------------------------------------------------------------------
// Test Axis Generators
// --------------------------------------------------------------------------

let topAxis: d3Axis.Axis<number | { valueOf(): number }> = d3Axis.axisTop(scaleLinear());
let rightAxis: d3Axis.Axis<Date> = d3Axis.axisRight<Date>(scaleTime());
let bottomAxis: d3Axis.Axis<string> = d3Axis.axisBottom(scaleOrdinal<number>());
let leftAxis: d3Axis.Axis<number | { valueOf(): number }> = d3Axis.axisLeft(scaleLinear<number>());

// --------------------------------------------------------------------------
// Test Configure Axis
// --------------------------------------------------------------------------

// scale(...) ----------------------------------------------------------------

leftAxis = leftAxis.scale(scalePow());
const powerScale: ScalePower<number, number> = leftAxis.scale<ScalePower<number, number>>();
// powerScale = leftAxis.scale(); // fails, without casting as AxisScale is purposely  generic



bottomAxis = bottomAxis.scale(scaleOrdinal<number>());
// bottomAxis = bottomAxis.scale(scalePow()) // fails, domain of scale incompatible with domain of axis

export default function drawMoveTimesChart(
  element: SVGElement,
  aData: AnalyseData,
  moveCentis: number[],
  curPly: number
) {
  const division = aData.game.division

  const svg = select(element)
  const margin = {top: 10, right: 10, bottom: 10, left: 25}
  const width = +svg.attr('width') - margin.left - margin.right
  const height = +svg.attr('height') - margin.top - margin.bottom
  const g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  const { max, series } = makeSerieData(aData, moveCentis)

  function addDivisionLine(xPos: number, name: string) {
    g.append('line')
    .attr('class', 'division ' + name)
    .attr('x1', xPos)
    .attr('x2', xPos)
    .attr('y1', y(-max))
    .attr('y2', y(max))

    g.append('text')
    .attr('class', 'chart-legend')
    .attr('transform', 'rotate(90)')
    .attr('y', -xPos)
    .attr('dy', '-0.4em')
    .text(name)
  }

  function setCurrentPly(ply: number | null) {
    g.selectAll('.dot').remove()
    if (ply !== null) {
      const isWhite = !!(ply & 1)
      const p = isWhite ? series.white.find(p => p.ply === ply) : series.black.find(p => p.ply === ply)
      if (p) {
        g.append('circle')
        .attr('class', 'dot')
        .attr('cx', x(ply))
        .attr('cy', y(p.y))
        .attr('r', 3)
      }
    }
  }

  const x = scaleLinear()
  .domain([0, series.white.length + series.black.length])
  .rangeRound([0, width])

  const y = scaleLinear()
  .domain([-max, max])
  .rangeRound([height, 0])

  const line = d3Area<Point>()
  .x(d => x(d.ply))
  .y(d => y(d.y))

  const area = d3Area<Point>()
  .x(d => x(d.ply))
  .y0(y(0))
  .y1(d => y(d.y))

  const maxCentis = Math.max.apply(Math, moveCentis) / 100
  const legendScale = scaleLinear()
  .domain([-maxCentis, maxCentis])
  .rangeRound([height, 0])

  const yAxis = axisLeft<number>(legendScale)
  .tickFormat(d => String(Math.abs(d)))

  g.append('g')
  .call(yAxis)
  .append('text')
  .attr('class', 'legend')
  .attr('transform', 'rotate(-90)')
  .attr('y', 6)
  .attr('dy', '0.71em')
  .attr('text-anchor', 'end')
  .text('Seconds')

  g.append('path')
  .datum(series.white)
  .attr('class', 'area above')
  .attr('d', area)

  g.append('path')
  .datum(series.black)
  .attr('class', 'area below')
  .attr('d', area)

  g.append('path')
  .attr('class', 'line')
  .datum(series.white)
  .attr('d', line)

  g.append('path')
  .attr('class', 'line')
  .datum(series.black)
//.........这里部分代码省略.........