Question

我创建了一个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)"); */

感谢。

Answer 1

如果您想要缩放到条形尺寸的图案，请使用渐变图案：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
  
    var w = 500,
      h = 500;

    var svg = d3.select("body").append("svg:svg")
      .attr("width", w)
      .attr("height", h);

    var color = d3.scale.category10();

    var gradient = svg.append("svg:defs")
      .append("svg:linearGradient")
      .attr("id", "gradient")
      .attr("x1", "0%")
      .attr("y1", "50%")
      .attr("x2", "100%")
      .attr("y2", "50%")
      .attr("spreadMethod", "pad");

    d3.range(10).forEach(function(d, i) {
      var c = color(i);
      gradient.append("svg:stop")
        .attr("offset", (i * 10) + "%")
        .attr("stop-color", c)
        .attr("stop-opacity", 1);
      gradient.append("svg:stop")
        .attr("offset", ((i + 1) * 10) + "%")
        .attr("stop-color", c)
        .attr("stop-opacity", 1);
    });

    svg.selectAll("bar")
      .data(d3.range(10))
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("width", function(d,i){
        return (w / 10) * i;
      })
      .attr("height", (h / 10) - 10)
      .attr("y", function(d,i){
        return (h / 10) * i;
      })
      .style("fill", "url(#gradient)");
  </script>
</body>

</html>

＆＃13;

如果您想要一个具有静态大小颜色的图案，请创建一个rects图案：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
  
    var w = 500,
      h = 500;

    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);

    var color = d3.scale.category10();

    var pattern = svg.append("svg:defs")
      .append("svg:pattern")
      .attr("width", w)
      .attr("height", 4)
      .attr("id", "myPattern")
      .attr("patternUnits","userSpaceOnUse");

    d3.range(10).forEach(function(d, i) {
      var c = color(i);
      pattern.append("rect")
        .attr("height", "4px")
        .attr("width", w / 10)
        .attr("x", (w / 10) * i)
        .attr("fill", c);
    });
    
    svg.selectAll("bar")
      .data(d3.range(10))
      .enter()
      .append("rect")
      .attr("class","bar")
      .attr("width", function(d,i){
        return (w / 10) * i;
      })
      .attr("height", (h / 10) - 10)
      .attr("y", function(d,i){
        return (h / 10) * i;
      })
      .style("fill", "url(#myPattern)");
  </script>
</body>

</html>

＆＃13;

D3：创建许多彩色矩形的条形

1 个答案: