使用Heatmap Canvas d3正确绘制点的问题

Question

我正在尝试绘制数据。请参见以下图像：

还有第二张图片：

以下是我尝试操作的代码：

private updateCircles(container, points: Example2D[]) {

    let selection = container.selectAll("circle").data(points);
    selection.enter().append("circle").attr("r", 3);
    selection
      .attr({
          cx : (d: Example2D,i) => (i),
          cy : (d: Example2D) => this.yScale(d.x1),       
      })
      .style("fill", d => this.color(d.label));
  }
} 

yScale定义为：

this.yScale = d3.scale.linear()
      .domain(yDomain)
      .range([height - 1 * padding, 0]);

yDomain = [-1,1]

我要寻找的是数据必须像缩略图中一样以正确的方式反映出来。

让我知道我缺少改进的地方。

Answer 1

尝试一下

  

您的钉子的高度和宽度与新图像不同

您通过执行操作获取数据

container.selectAll("circle").data(points);

将其附加到

selection.enter().append("circle").attr("r", 3);

但是您在缩略图上的svg容器（宽度和高度）与新图像不同

请尝试重新设置规模：

private updateCircles(container, points: Example2D[]) {

    //get data
    let selection = container.selectAll("circle").data(points);
    // this is new image on the right width and hight
    let rangeX = [ ] //find width [min,max] of your new image on the right
    let rangeY = [ ] //find height [min,max] of your new image on the right

    //try set new scale
    let newxScale = d3.scale.linear()
      .domain(xDomain)
      .range(rangeX);
    let newyScale = d3.scale.linear()
      .domain(yDomain)
      .range(rangeY);

    //append with new scale
    selection.enter().append("circle").attr("r", 3);
    selection
      .attr({
          cx : (d: Example2D,i) => newxscale(i),
          cy : (d: Example2D) => newyscale(d.x1),       
      })
      .style("fill", d => this.color(d.label));
  }
} 

如果要反映与缩略图相同的数据。确保您的scaleX和scaleY格式正确。