坐标问题已解决。

src/index.js

@@ -461,17 +461,17 @@ export default class StockHeatmap extends React.Component {
             const l = this.defaults.bidAskWidth * (+v.qty / maxBidAskVol);
             // save v bars length
             this.bidAskBarAnimConfig[v.rate] = d3.interpolateNumber(this.bidAskBarAnimConfig[v.rate] || 0, l)(t);
-            this.drawingContext.fillRect(0, this.yScale(v.rate) - h/2, this.bidAskBarAnimConfig[v.rate], h);
+            this.drawingContext.fillRect(0, this.yScale(v.rate), this.bidAskBarAnimConfig[v.rate], h);
             let tw = this.drawingContext.measureText(v.qty).width;
             if (this.defaults.bidAskWidth - this.bidAskBarAnimConfig[v.rate] - 2 >= tw) {
               // text outside bar
               this.drawingContext.textAlign = 'start';
               this.drawingContext.fillStyle = this.defaults.textOnBackground;
-              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] + 2, this.yScale(v.rate) + 1);
+              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] + 2, this.yScale(v.rate) + h / 2 + 1);
             } else {
               this.drawingContext.textAlign = 'end';
               this.drawingContext.fillStyle = textColor;
-              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] - 2, this.yScale(v.rate) + 1);
+              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] - 2, this.yScale(v.rate) + h / 2 + 1);
             }
           });
         }
@@ -510,7 +510,7 @@ export default class StockHeatmap extends React.Component {
             this.drawingContext.fillStyle = color.toString();
             this.drawingContext.fillRect(
               this.xScale(ts),
-              this.yScale(buy.rate) - yh2,  // 减去半个方块的高度
+              this.yScale(buy.rate),  // 减去半个方块的高度
               this.xScale.bandwidth(),
               this.yScale.bandwidth()
             );
@@ -524,7 +524,7 @@ export default class StockHeatmap extends React.Component {
             this.drawingContext.fillStyle = color.toString();
             this.drawingContext.fillRect(
               this.xScale(ts),
-              this.yScale(sell.rate) - yh2,  // 减去半个方块的高度
+              this.yScale(sell.rate),  // 减去半个方块的高度
               this.xScale.bandwidth(),
               this.yScale.bandwidth()
             );
@@ -537,8 +537,8 @@ export default class StockHeatmap extends React.Component {
         const r = /*xh2*/ this.defaults.volumeCircleMaxRadius * (+marketDepth.lastTradedQty / maxTradedVolume);
         this.drawingContext.beginPath();
         this.drawingContext.arc(
-          this.xScale(ts) /* + xh2*/,
-          this.yScale(+marketDepth.lastTradedPrice) /* + yh2*/,
+          this.xScale(ts) + xh2,
+          this.yScale(+marketDepth.lastTradedPrice) + yh2,
           r, 0, 2 * Math.PI
         );
         this.drawingContext.strokeStyle = trade_color;
@@ -551,7 +551,7 @@ export default class StockHeatmap extends React.Component {
       this.drawingContext.beginPath();
       d3.line()
         .x(d => this.xScale(d.ts))
-        .y(d => this.yScale(d.marketDepth.buys[0].rate))
+        .y(d => this.yScale(d.marketDepth.buys[0].rate) + yh2)
         // .curve(d3.curveLinear)
         .context(this.drawingContext)
         (this.windowedData);
@@ -565,7 +565,7 @@ export default class StockHeatmap extends React.Component {
       this.drawingContext.beginPath();
       d3.line()
         .x(d => this.xScale(d.ts))
-        .y(d => this.yScale(d.marketDepth.sells[0].rate))
+        .y(d => this.yScale(d.marketDepth.sells[0].rate) + yh2)
         // .curve(d3.curveLinear)
         .context(this.drawingContext)
         (this.windowedData);