d3.js：渐变填充是轮廓，如何使其坚实？

Question

我有一个简单的条形图，使用d3.js在两个矩形对象上具有线性渐变。渐变在那里，但是渐变显示为轮廓（矩形的顶部和底部有两条细线）。我要用渐变而不是轮廓填充。经过大量研究，我仍然没有答案。

这是d3 javascript：

df <- read.table(text =
           "0 1 0 1 0 1 1 0
            U U U U 1 0 1 1
            0 1 1 0 0 1 0 1
            0 1 0 1 0 1 1 0
            U U U U 1 0 1 1
            0 1 1 0 0 1 0 1", header = F)


df[]<-apply(df, 2, function(x){
  #find rows with U
  us<-which(x=="U" )
  #replace U with value above (if above=below)
  x[us]<-ifelse(x[us-1]==x[us+1], x[us-1], "U")
  return(x)
  })

所以我的问题是如何在具有线性渐变的矩形中进行实心填充？

感谢您的帮助。