深度图颜色应该是可视范围内比较而不是仅当时的DOMtick数据比较

src/index.js

@@ -7,7 +7,15 @@ import * as d3Interpolate from 'd3-interpolate';
 import * as d3Shape from 'd3-shape';
 import * as d3Timer from 'd3-timer';
 import * as d3Ease from 'd3-ease';
-import { extractBidPrices, extractBidVolumes, extractMaxTradedVolume, extractAvgTradedVolume, extractMaxVolume, zoomTimeFormat } from './utils';
+import {
+  extractBidPrices,
+  extractBidVolumes,
+  extractMaxTradedVolume,
+  extractAvgTradedVolume,
+  extractMaxVolume,
+  zoomTimeFormat,
+  extractMaxAskBidVolume
+} from "./utils";
 
 export const d3 = Object.assign(
   Object.assign(
@@ -588,6 +596,7 @@ export default class StockHeatmap extends React.Component {
     this.drawingContext.save();
     if (this.xScale && this.yScale && this.bidAskScale && this.drawingContext !== null) {
       const avgTradedVolume = extractAvgTradedVolume(this.windowedData);
+      const maxBidAskVolume = extractMaxAskBidVolume(this.windowedData);
       const xh2 = this.xScale.bandwidth() * 0.5;
       const yh2 = this.yScale.bandwidth() * 0.5;
       this.drawingContext.translate(this.defaults.borderPadding[3], this.defaults.borderPadding[0]);
@@ -596,12 +605,11 @@ export default class StockHeatmap extends React.Component {
         const ask1 = marketDepth.sells[0];
         const bid1 = marketDepth.buys[0];
         const ts = d.ts;
-        const maxBidAskVol = extractMaxVolume(d);
         // draw buys
         if (marketDepth.buys && marketDepth.buys.length > 0) {
           let color = d3.color('#1a506d').rgb();
           marketDepth.buys.map(buy => {
-            color.opacity = buy.qty / maxBidAskVol;
+            color.opacity = buy.qty / maxBidAskVolume;
             this.drawingContext.fillStyle = color.toString();
             this.drawingContext.fillRect(
               this.xScale(ts),
@@ -615,7 +623,7 @@ export default class StockHeatmap extends React.Component {
         if (marketDepth.sells && marketDepth.sells.length > 0) {
           let color = d3.color('#1a506d').rgb();
           marketDepth.sells.map(sell => {
-            color.opacity = sell.qty / maxBidAskVol;
+            color.opacity = sell.qty / maxBidAskVolume;
             this.drawingContext.fillStyle = color.toString();
             this.drawingContext.fillRect(
               this.xScale(ts),

src/utils.js

@@ -58,6 +58,26 @@ export const extractMaxTradedVolume = (data) => {
   else return 1;
 }
 
+/**
+ * 获取data中的的所有order book的最大值
+ * @param {any[]} data
+ * @returns {number}
+ */
+export const extractMaxAskBidVolume = (data) => {
+  let maxVols = data.map(d => {
+    if (d.marketDepth) {
+      let asksMax = Math.max(...d.marketDepth.buys.map(order => order.qty));
+      let bidsMax = Math.max(...d.marketDepth.sells.map(order => order.qty))
+
+      return Math.max(asksMax, bidsMax);
+    }
+    else return 0;
+  });
+  if (maxVols.length > 0) return Math.max(...maxVols);
+  else return 1;
+}
+
+
 export const extractAvgTradedVolume = (data) => {
   let vols = data.map(d => {
     if (d.marketDepth) return +d.marketDepth.lastTradedQty;