D3.js D3：创建由许多彩色矩形组成的条形图

我已经创建了一个D3条形图，它接收我的数据，应用一个比例，然后绘制我的矩形。这是我当前的输出：

我想让它更直观。这些值是温度，所以我想在这里创建类似于第一个条的东西：

基本上我想做一个酒吧，是由许多不同颜色的矩形

在考虑了几个选项之后，我决定尝试将一种模式注入到我的条中。我试着用路径制作图案，然后尝试矩形，但没有成功

我不受“模式”方法的束缚，所以我追求的是一种不同的方法，或者我如何制作这种模式。这是我的密码：

// Set variables.
var dataset = // an array of objects, each with two properties: location and temperature
w = 500,
h = 800,
xScale = d3.scale.linear()
  .domain([-30, 40])
  .range([5, 350]),
yScale = d3.scale.ordinal();

// Create SVG element.
var svg = d3.select("body")
  .append("svg")
    .attr("width", w)
    .attr("height", h);

/* svg.append("defs")
  .append("pattern")
    .attr("id", "heatHatch")
    .attr("patternUnits", "userSpaceOnUse")
    .attr("width", 350)
    .attr("height", 25);
     .append("path")
      .attr("d", "M10 0 L10 20 L0 20 L0 0 Z M22 0 L22 20 L12 20 L12 0 Z")
      .attr("fill", "pink")
    .append("path")
      .attr("d", "M22 0 L22 20 L12 20 L12 0 Z")
      .attr("fill", "red");
    .append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 10)
      .attr("height", 20)
      .attr("fill", "pink"); */

// Create bars.
svg.selectAll("rect")
  .data(dataset)
  .enter()

  .append("rect")
    .attr("x", 0)
    .attr("y", function(d, i) {
      return i * 25;
    })
    .attr("width", function(d) {
      return xScale(d[1]);
    })
    .attr("height", 20);
    /*.attr("fill", "url(#heatHatch)"); */

---

谢谢。

如果您想要缩放到条大小的图案，请使用渐变图案：

var w=500，
h=500；
var svg=d3.select（“body”）.append（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var color=d3.scale.category10（）；
var gradient=svg.append（“svg:defs”）
.append（“svg:linearGradient”）
.attr（“id”、“梯度”）
.attr（“x1”，“0%”）
.attr（“y1”，“50%”）
.attr（“x2”，“100%”）
.attr（“y2”，“50%”）
.attr（“扩展方法”、“pad”）；
d3.范围（10）.forEach（函数（d，i）{
var c=颜色（i）；
gradient.append（“svg:stop”）
.attr（“偏移量”，（i*10）+“%”）
.attr（“停止颜色”，c）
.attr（“停止不透明度”，1）；
gradient.append（“svg:stop”）
.attr（“偏移量”（（i+1）*10）+“%”）
.attr（“停止颜色”，c）
.attr（“停止不透明度”，1）；
});
svg.selectAll（“条”）
.数据（d3.范围（10））
.输入（）
.append（“rect”）
.attr（“类”、“条”）
.attr（“宽度”，函数（d，i）{
申报表（w/10）*i；
})
.attr（“高度”（h/10）-10）
.attr（“y”，函数（d，i）{
返回（h/10）*i；
})
.style（“填充”、“url（#渐变）”）；