javascript - 使用 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]

我正在寻找的是数据必须按照缩略图中的确切方式反射(reflect)。

让我知道我还需要改进什么。

Answer 1

试试这个

your tumbnail have differend height and width with new image

你通过这样做来获取数据

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));
  }
} 

如果您想反射(reflect)与缩略图相同的数据。确保您的scaleX和scaleY的格式正确。