代码之家 › 专栏 › 技术社区 › Jaffer Wilson Dilip kumar

使用热图画布d3正确绘制点时出现问题

canvas d3.js html javascript

Jaffer Wilson Dilip kumar · 技术社区 · 5 年前

还有第二幅图:

以下是我尝试制作的代码:

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]

让我知道我缺少什么来改进。

1 回复 | 直到 4 年前

KEKUATAN 5 年前

试试这个

你的肚脐有不同的高度和宽度与新的形象

你可以通过

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

将其附加到所选内容上

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

但是tumbnail和新图像上的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));
  }
}