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>

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

1 个答案: