How do I get rid of tiny lines between canvas rects

user_3049893 0
Viewed 168

heatmap

I am very new to D3 and as you can see in the image above there are tiny lines/gaps between each rectangle that I would love to get rid of, this is drawn on a canvas element with each rectangle starting where the last one ends using D3.js following this tutorial almost exactly minus adding the gaps between each square.

I've tried

this.canvas.imageSmoothingQuality = 'low';

draw() {
  const canvas = d3
    .select(this.chartContainer.nativeElement)
    .append('canvas')
    .attr('width', this.width)
    .attr('height', this.height)
    .attr(
      'transform',
      'translate(' + this.margin.left + ',' + this.margin.top + ')'
    );

  this.canvas = canvas.node().getContext('2d');
  this.clearCanvas();
  this.canvas.imageSmoothingQuality = 'low';
  const elements = this.shadowContainer.selectAll('custom.rect');

  const _this = this;
  elements.each(function(d, i) {
    const node = d3.select(this);
    // Here you retrieve the colour from the individual in-memory node and set the fillStyle for the canvas paint
    _this.canvas.fillStyle = node.attr('color');
    // Here you retrieve the position of the node and apply it to the fillRect context function which will fill and paint the square.

    _this.canvas.fillRect(
      Number(node.attr('x')),
      Number(node.attr('y')),
      Number(node.attr('width')),
      Number(node.attr('height'))
    );
  });
}

private dataBind(value) {
  const customBase = document.createElement('custom');
  this.shadowContainer = d3.select(customBase);
  const {
    viewModes: {
      heatMap: {
        data,
        chartOptions: { engagementStatus, xAxis, yAxis }
      }
    }
  } = value;

  const x = this.d3
    .scaleBand()
    .range([0, this.width])
    .domain(xAxis.categories);

  this.shadowContainer
    .append('g')
    .style('font-size', 11)
    .attr('class', 'x-axis')
    .call(this.d3.axisTop(x).tickSize(0))
    .select('.domain')
    .remove();

  this.shadowContainer
    .selectAll('.x-axis text')
    .style('text-anchor', 'start')
    .attr('transform', function(d) {
      return `translate(8, -8)rotate(-90)`;
    });

  const y = this.d3
    .scaleBand()
    .domain(d3.reverse(yAxis.categories))
    .range([this.height, 0]);

  const color = this.d3
    .scaleLinear()
    .domain([-2, -1, 0, 1])
    // @ts-ignore
    .range(['#5b717d', '#ffb957', '#ee6b56', '#40a050']);

  const join = this.shadowContainer
    .selectAll('custom.rect')
    .data(data, function(d) {
      return `${d.Date}:${d.Member}`;
    });

  const enterSelection = join
    .enter()
    .append('custom')
    .attr('class', 'rect')
    .attr('x', d =>
      this.getCorrectDatePosition(
        d.Date,
        x,
        xAxis.categories[0].split('/').length
      )
    )
    .attr('y', function(d) {
      return y(d.Member);
    })
    .attr('width', 24)
    .attr('height', 24);

  join
    .merge(enterSelection)
    .attr('width', x.bandwidth())
    .attr('height', y.bandwidth())
    .attr('color', function(d) {
      return color(d.score);
    });

  const exitSelection = join
    .exit()
    .transition()
    .attr('width', 0)
    .attr('height', 0)
    .remove();
}
d3.js heatmap canvas
1 Answers

This is likely an issue stemming from your scales. It can occur with either SVG or canvas and occurs when dealing with coordinates that require plotting at fractions of a pixel.

Here's a demonstration with SVG:

var data = d3.range(20);

var x = d3.scaleBand()
  .range([10,250])
  .domain(data)
  
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500);
  
var rect = svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", d=>x(d) )
 .attr("y", 50)
 .attr("width", x.bandwidth())
 .attr("height",100)
 .attr("fill","crimson")

svg.transition()
  .attrTween("tween", function() {
    var i = d3.interpolate(250,480)
    return function(t) {
       x.range([50,i(t)])
       rect.attr("x",d=>x(d))
           .attr("width", x.bandwidth());
       
       return "";
    }
  })
  .duration(10000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

And one with Canvas:

var data = d3.range(20);

var x = d3.scaleBand()
  .range([10,250])
  .domain(data)
  
var canvas = d3.select("body")
  .append("canvas")
  .attr("width", 500);
  
var rect = d3.create("div").selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", d=>x(d) )
 .attr("y", 50)
 .attr("width", x.bandwidth())
 .attr("height",100)
 .attr("fill","crimson")

canvas.transition()
  .attrTween("tween", function() {
    var i = d3.interpolate(250,480)
    var context = canvas.node().getContext("2d");
    return function(t) {
       x.range([50,i(t)])
       context.fillStyle = "#fff";
       context.fillRect(0,0,550,300);
       rect.attr("x",d=>x(d))
           .attr("width", x.bandwidth())
           .each(function() {
              var node = d3.select(this);
              context.fillStyle = "crimson"
              context.fillRect(
                 +node.attr("x"),
                 +node.attr("y"),
                 +node.attr("width"),
                 +node.attr("height"))
           })
       
       return "";
    }
  })
  .duration(10000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

The solution is to be a bit more involved in setting the scale's domain and range. Start with the desired bandwidth, a whole number in pixels, and set the range so that the difference between the minimum and maximum values is equal to the number of values in the domain * the bandwidth.

So instead of:

 const x = this.d3
  .scaleBand()
  .range([0, this.width])
  .domain(xAxis.categories);

You'd have:

 const length = 10; // length of a box side
 const x = this.d3
  .scaleBand()
  .domain(xAxis.categories)
  .range([0,xAxis.categories * length])

You could also calculate length above dynamically, say by using: Math.floor(width/xAxis.categories)

Using the above approach and a slightly contrived example to accommodate the transition, we remove the aliasing/moire pattern. Because we use only full pixels, the transition jumps as each bar increases in width by a full pixel at the same time, as space becomes available in the range:

var data = d3.range(20);
var length = 30;

var x = d3.scaleBand()
  .range([10,data.length*length])
  .domain(data)
  
var canvas = d3.select("body")
  .append("canvas")
  .attr("width", 500);
  
var rect = d3.create("div").selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", d=>x(d) )
 .attr("y", 50)
 .attr("width", x.bandwidth())
 .attr("height",100)
 .attr("fill","crimson")

canvas.transition()
  .attrTween("tween", function() {
    var i = d3.interpolate(250,480)
    var context = canvas.node().getContext("2d");
    return function(t) {
       length = Math.floor(i(t)/data.length)
       x.range([10,length*data.length+10])
              
       context.fillStyle = "#fff";
       context.fillRect(0,0,550,300);
       rect.attr("x",d=>x(d))
           .attr("width", x.bandwidth())
           .each(function(d,i) {
              var node = d3.select(this);
              context.fillStyle = d3.schemeCategory10[i%10];
              context.fillRect(
                 +node.attr("x"),
                 +node.attr("y"),
                 +node.attr("width"),
                 +node.attr("height"))
           })
       
       return "";
    }
  })
  .duration(10000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

user_71060860
Related