用D3绘制图表

spritejs拥有与DOM一致性很高的api，可以很方便地与d3协同工作。

与d3一同使用 - 图1

要显示坐标轴，我们可以使用d3扩展库

  1. const scene = new Scene('#d3-linear', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  3. const dataset = [125, 121, 127, 193, 309];
  5. const linear = d3.scaleLinear()
  6.   .domain([100, d3.max(dataset)])
  7.   .range([0, 500]);
  9. const colors = ['#f00', '#0a0', '#00a', '#3ca', '#7ac'];
  11. const s = d3.select(scene).append('fglayer');
  13. const chart = s.selectAll('sprite')
  14.   .data(dataset)
  15.   .enter()
  16.   .append('sprite')
  17.   .attr('x', 300)
  18.   .attr('y', (d, i) => {
  19.     return 200 + i * 55;
  20.   })
  21.   .attr('width', 0)
  22.   .attr('height', 50)
  23.   .attr('bgcolor', 'black');
  25. chart
  26.   .transition()
  27.   .duration(2000)
  28.   .attr('width', (d, i) => {
  29.     return linear(d);
  30.   })
  31.   .attr('bgcolor', (d, i) => {
  32.     return colors[i];
  33.   });
  35. s.append('axis')
  36.   .attr('ticks', [100, 200, 300, 400])
  37.   .attr('axisScales', [linear])
  38.   .attr('direction', 'bottom')
  39.   .attr('pos', [300, 500])
  40.   .attr('color', 'blue');
  42. chart.on('click', (data) => {
  43.   /* eslint-disable no-console */
  44.   console.log(data, d3.event);
  45.   /* eslint-enable no-console */
  46. });

还可以绘制层次图：

与d3一同使用 - 图2

  1. const scene = new Scene('#d3-hierarchy', {viewport: ['auto', 'auto'], resolution: [1540, 1200]});
  2. const layer = d3.select(scene).append('fglayer');
  4. d3.json('/res/data/city.json', (err, data) => {
  5.   const root = d3.hierarchy(data)
  6.     .sum(d => 1)
  7.     .sort((a, b) => b.value - a.value);
  9.   const pack = d3.pack()
  10.     .size([1180, 1180])
  11.     .padding(3);
  13.   const nodes = pack(root);
  15.   layer.append('label')
  16.     .attr('pos', [1170, 50])
  17.     .attr('name', 'region')
  18.     .attr('font', '42px Arial')
  19.     .attr('text', '中国');
  21.   layer.selectAll('label[name!="region"]')
  22.     .data(nodes.descendants())
  23.     .enter()
  24.     .append('label')
  25.     .attr('anchor', 0.5)
  26.     .attr('pos', (d) => {
  27.       const x = Math.round(d.x),
  28.         y = Math.round(d.y);
  30.       return [170 + x, 10 + y];
  31.     })
  32.     .attr('size', (d) => {
  33.       const r = Math.round(d.r);
  34.       return [2 * r, 2 * r];
  35.     })
  36.     .attr('fillColor', 'black')
  37.     .attr('bgcolor', 'rgba(31, 119, 180, 0.4)')
  38.     .attr('borderRadius', (d) => {
  39.       return d.r;
  40.     })
  41.     .attr('font', (d) => {
  42.       return `${16 + Math.round(10 * Math.log2(d.value))}px Arial`;
  43.     })
  44.     .attr('lineHeight', (d) => {
  45.       return Math.round(2 * d.r);
  46.     })
  47.     .attr('textAlign', 'center')
  48.     .attr('text', d => d.data.name)
  49.     .on('mousemove', (d) => {
  50.       d3.event.stopDispatch();
  52.       const {offsetX, offsetY} = d3.event,
  53.         r = Math.round(d.r);
  55.       if(offsetX ** 2 + offsetY ** 2 < r ** 2) {
  56.         layer.selectAll('label[name="region"]')
  57.           .attr('text', d.data.name);
  58.         layer.selectAll('label[name!="region"]')
  59.           .attr('border', null);
  60.         d3.event.target.attr('border', [3, 'red']);
  61.       }
  62.     })
  63.     .on('mouseleave', (d) => {
  64.       d3.event.target.attr('border', null);
  65.     });
  66. });

地图应用：

与d3一同使用 - 图3

  1. const scene = new Scene('#d3-map', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  3. const layer = d3.select(scene).append('fglayer');
  5. const width = 1540;
  6. const height = 600;
  8. const projection = d3.geoMercator()
  9.   .center([107, 38])
  10.   .scale(width / 2 - 40)
  11.   .translate([width / 4 + 80, height / 2]);
  13. const path = d3.geoPath().projection(projection);
  15. d3.json('/res/data/china.json', (err, data) => {
  16.   if(err) throw new Error(err);
  18.   let selectedTarget = null;
  20.   layer.selectAll('path')
  21.     .data(data.features)
  22.     .enter()
  23.     .append('path')
  24.     .attr('color', 'black')
  25.     .attr('lineWidth', 1)
  26.     .attr('d', path)
  27.     .attr('renderMode', 'fill')
  28.     .attr('fillColor', '#d1eeee')
  29.     .on('click', (d) => {
  30.       const paths = d3.event.target.findPath(d3.event.offsetX, d3.event.offsetY);
  32.       if(paths.length) {
  33.         /* eslint-disable no-console */
  34.         console.log(d.properties.name);
  35.         /* eslint-enable no-console */
  36.       }
  37.     })
  38.     .on('mousemove', (d) => {
  39.       const event = d3.event;
  40.       if(event.target !== selectedTarget) {
  41.         const paths = event.target.findPath(event.offsetX, event.offsetY);
  43.         if(paths.length) {
  44.           if(selectedTarget) {
  45.             selectedTarget.attr('fillColor', '#d1eeee');
  46.           }
  47.           selectedTarget = event.target;
  48.           event.target.attr('fillColor', '#c73');
  49.         }
  50.       }
  51.     });
  52. });

连线图应用：

与d3一同使用 - 图4

  1. const scene = new Scene('#d3-link', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  3. const layer = scene.layer('fglayer', {
  4.   handleEvent: false,
  5. });
  7. const simulation = d3.forceSimulation()
  8.   .force('link', d3.forceLink().id(d => d.id))
  9.   .force('charge', d3.forceManyBody())
  10.   .force('center', d3.forceCenter(400, 300));
  12. d3.json('/res/data/miserables.json', (error, graph) => {
  13.   if(error) throw error;
  15.   simulation
  16.     .nodes(graph.nodes)
  17.     .on('tick', ticked);
  19.   simulation.force('link')
  20.     .links(graph.links);
  22.   const path = new spritejs.Path();
  24.   path.attr({
  25.     size: [1200, 800],
  26.     pos: [0, 100],
  27.   });
  28.   layer.appendChild(path);
  30.   d3.select(layer.canvas)
  31.     .call(d3.drag()
  32.       .container(layer.canvas)
  33.       .subject(dragsubject)
  34.       .on('start', dragstarted)
  35.       .on('drag', dragged)
  36.       .on('end', dragended));
  39.   path.on('afterdraw', ({context}) => {
  40.     context.beginPath();
  41.     graph.links.forEach((d) => {
  42.       const [sx, sy] = [d.source.x, d.source.y],
  43.         [tx, ty] = [d.target.x, d.target.y];
  45.       context.moveTo(sx, sy);
  46.       context.lineTo(tx, ty);
  47.     });
  48.     context.strokeStyle = '#aaa';
  49.     context.stroke();
  51.     context.beginPath();
  52.     graph.nodes.forEach((d) => {
  53.       const [x, y] = [d.x, d.y];
  55.       context.moveTo(x + 3, y);
  56.       context.arc(x, y, 3, 0, 2 * Math.PI);
  57.     });
  58.     context.fill();
  59.     context.strokeStyle = '#fff';
  60.     context.stroke();
  61.   });
  63.   function ticked() {
  64.     path.forceUpdate(true);
  65.   }
  67.   function dragsubject() {
  68.     const [x, y] = layer.toLocalPos(d3.event.x, d3.event.y);
  69.     return simulation.find(x, y - 100);
  70.   }
  71. });
  73. function dragstarted() {
  74.   if(!d3.event.active) simulation.alphaTarget(0.3).restart();
  76.   const [x, y] = [d3.event.subject.x, d3.event.subject.y];
  78.   d3.event.subject.fx = x;
  79.   d3.event.subject.fy = y;
  81.   d3.event.subject.x0 = x;
  82.   d3.event.subject.y0 = y;
  83. }
  85. function dragged() {
  86.   const [x, y] = [d3.event.x, d3.event.y],
  87.     {x0, y0} = d3.event.subject;
  89.   const [dx, dy] = layer.toLocalPos((x - x0), (y - y0));
  91.   d3.event.subject.fx = x0 + dx;
  92.   d3.event.subject.fy = y0 + dy;
  93. }
  95. function dragended() {
  96.   if(!d3.event.active) simulation.alphaTarget(0);
  97.   d3.event.subject.fx = null;
  98.   d3.event.subject.fy = null;
  99. }