javascript - D3 用不同的数据创建相同的图像

Question

这是我用来学习 D3 的教程，我正在尝试新事物。我有正确显示颜色的数据。但是如果我有两个不同的数据但我希望它做同样的事情我该怎么办？我希望新数据显示在图像颜色集下。

var data = d3.range(0, 50);
var data1 = d3.range(51, 100); //new data
var colorScale = d3.scale.category20();

var padding = 2;

// This is the total size of the data
var dataLength = data.length;

var x = d3.scale.linear()
  .domain([d3.min(data), d3.max(data)])
  .range([0, window.innerWidth]);

var svg = d3.select("body")
  .append("svg")
  .attr({
    "width": window.innerWidth,
    "height": window.innerHeight
  });


// create a rect
var rects = svg.append("g")
  .attr("class", "first");

rects.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr({
    "fill": function(d) {
      return colorScale(d);
    },
    "x": function(d, i) {
      return x(d);
    },
    "width": window.innerWidth / dataLength - padding,
    "height": 50
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

您的问题不太清楚，但一种方法是创建一个绘制矩形的函数(此处称为 draw)，它接受不同的数据数组作为参数。

这是一个演示:

var data1 = d3.range(0, 50);
var data2 = d3.range(51, 100); //new data
var colorScale = d3.scale.category20();
var yPos = 10;

var padding = 2;

var svg = d3.select("body")
  .append("svg")
  .attr({
    "width": window.innerWidth,
    "height": window.innerHeight
  });

draw(data1);
draw(data2);

function draw(data) {

  // This is the total size of the data
  var dataLength = data.length;

  var x = d3.scale.linear()
    .domain([d3.min(data), d3.max(data)])
    .range([0, window.innerWidth]);

  // create a rect
  var rects = svg.append("g")
    .attr("class", "first");

  rects.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr({
      "fill": function(d) {
        return colorScale(d);
      },
      "x": function(d, i) {
        return x(d);
      },
      "y": yPos,
      "width": window.innerWidth / dataLength - padding,
      "height": 50
    });

    yPos += 60;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

在代码片段中，draw 有两个参数:数据数组和矩形的垂直位置。

编辑:有多种方法可以动态地将一行放置在前一行下方。当然，最优雅的方法是获取前一行的位置。最简单的方法(不是那么优雅)就是使用计数器:

var data1 = d3.range(0, 50);
var data2 = d3.range(51, 100); //new data
var colorScale = d3.scale.category20();
var yPos = 10;

var padding = 2;

var svg = d3.select("body")
  .append("svg")
  .attr({
    "width": window.innerWidth,
    "height": window.innerHeight
  });

draw(data1);
draw(data2);
draw(data2);
draw(data1);
draw(data1);

function draw(data) {

  // This is the total size of the data
  var dataLength = data.length;

  var x = d3.scale.linear()
    .domain([d3.min(data), d3.max(data)])
    .range([0, window.innerWidth]);

  // create a rect
  var rects = svg.append("g")
    .attr("class", "first");

  rects.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr({
      "fill": function(d) {
        return colorScale(d);
      },
      "x": function(d, i) {
        return x(d);
      },
      "y": yPos,
      "width": window.innerWidth / dataLength - padding,
      "height": 50
    });

    yPos += 60;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>