D3.js颜色块之间的平滑过渡

Question

我正在尝试使用D3.js进行可视化。在我的可视化中，我有一堆颜色块。我注意到我的颜色块之间有薄的灰色边缘，我不想拥有它。我不确定问题的来源。任何帮助表示赞赏。

我的代码：

var svg = d3.select(container).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
        .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var background = svg.append("rect")
    //.style("stroke-width", "2px")
    .attr("width", width)
    .attr("height", height);

var x = d3.scale.ordinal()
    .domain(d3.range(numcols))
    .rangeBands([0, width]);

var y = d3.scale.ordinal()
    .domain(d3.range(numrows))
    .rangeBands([0, height]);

var colorMap = d3.scale.linear()
    .domain([minValue,maxValue])
    .range([startColor, endColor]);

var row = svg.selectAll(".row")
    .data(dataValues)
    .enter().append("g")
    .attr("class", "row")
    .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

var cell = row.selectAll(".cell")
     .data(function(d) { return d; })
     .enter().append("g")
     .attr("class", "cell")
     .attr("transform", function(d, i) { return "translate(" + x(i) + ", 0)"; });

cell.append('rect')
    .attr("width", x.rangeBand())
    .attr("height", y.rangeBand());

row.selectAll(".cell")
    .data(function(d, i) { return dataValues[i]; })
    .style("fill", colorMap);

if(highlightCellOnHover){
    cell
    .on("mouseover", function(d) {
        d3.select(this).style("fill", highlightCellColor);
    })
    .on("mouseout", function() {
        d3.select(this).style("fill", colorMap);
    });
}