Question

我有一个简单的d3面积图，其中两个区域使用以下数据绘制：

var data =  [
  [{'year':0,'amount':2},{'year':1,'amount':3},{'year':2,'amount':9},{'year':3,'amount':5},{'year':4,'amount':6},{'year':5,'amount':7},{'year':6,'amount':8},{'year':7,'amount':9},{'year':8,'amount':10},{'year':9,'amount':11},{'year':10,'amount':12}],
  [{'year':0,'amount':1},{'year':1,'amount':2},{'year':2,'amount':8},{'year':3,'amount':4},{'year':4,'amount':5},{'year':5,'amount':6},{'year':6,'amount':7},{'year':7,'amount':8},{'year':8,'amount':9},{'year':9,'amount':10},{'year':10,'amount':11}]
];

两个独立的对象数组允许我使用下面的代码在一个图表上绘制两个区域：

var colors = [
  'steelblue',
  'lightblue',
];

var margin = {top: 20, right: 30, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
   .domain(d3.extent(data.map(function(d,i) { console.log(d); return d[i].year; })))
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-1, 16])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
  .tickSize(-height)
  .tickPadding(10)  
  .tickSubdivide(true)  
    .orient("bottom");  

var yAxis = d3.svg.axis()
    .scale(y)
  .tickPadding(10)
  .tickSize(-width)
  .tickSubdivide(true)  
    .orient("left");

var svg = d3.select("body").append("svg")

    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("g")
  .attr("class", "y axis")
  .append("text")
  .attr("class", "axis-label")
  .attr("transform", "rotate(-90)")
  .attr("y", (-margin.left) + 10)
  .attr("x", -height/2)
  .text('Axis Label');  

svg.append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);





//************************************************************
// Create D3 line object and draw data on our SVG object
//************************************************************
var line = d3.svg.area()
    .interpolate("cardinal")  
    .x(function(d) { return x(d.year); })
    .y0(height)
    .y1(function(d) { return y(d.amount); });   

svg.selectAll('.line')
  .data(data)
  .enter()
  .append("path")
    .attr("class", "area")
  .attr('fill', function(d,i){      
    return colors[i%colors.length];
  })
    .attr("d", line);

我需要根据数据设置域名。我试过了：

.domain(d3.extent(data.map(function(d) { return d.amount; })))

...在创建线性比例时，但显然这不起作用，因为上面调用中的数组映射只是映射嵌套数组而不是内部对象。

如何使用此格式的数据设置域？或者是否有更好的方法来构建我的数据，同时仍允许绘制多个区域？

Answer 1

要获得两个数组中包含的所有amount值的总体范围，您需要以某种方式将这些数组合并为一个。有几种方法可以做到：

d3.merge()将两个数组合并为一个：
```
var allValues = d3.merge(data);
```
这种方法相对于以下方法的主要优点是，这将适用于data中的任意数量的嵌套数组，而无需对代码进行任何更改。

内置方法Array.prototype.concat()：

var allValues = data[0].concat(data[1])

如果你想展示并且不需要使用旧版本的JavaScript compatible，可以将spread operator新版本应用于ES6：
```
var allValues = [...data[0], ...data[1]];
```

让这个包含所有值的扁平数组可以将其传递给d3.extent()以计算整体范围。

var extent = d3.extent(allValues, function(d) { return d.amount; });

var data =  [
  [{'year':0,'amount':2},{'year':1,'amount':3},{'year':2,'amount':9},{'year':3,'amount':5},{'year':4,'amount':6},{'year':5,'amount':7},{'year':6,'amount':8},{'year':7,'amount':9},{'year':8,'amount':10},{'year':9,'amount':11},{'year':10,'amount':12}],
  [{'year':0,'amount':1},{'year':1,'amount':2},{'year':2,'amount':8},{'year':3,'amount':4},{'year':4,'amount':5},{'year':5,'amount':6},{'year':6,'amount':7},{'year':7,'amount':8},{'year':8,'amount':9},{'year':9,'amount':10},{'year':10,'amount':11}]
];

console.log(d3.extent(d3.merge(data), function(d) { return d.amount; }));           // using d3.merge()
console.log(d3.extent(data[0].concat(data[1]), function(d) { return d.amount; }));  // using Array.prototype.concat()

// This will only work in compatible browsers which support the new ES6 spread operator
console.log(d3.extent([...data[0], ...data[1]], function(d) { return d.amount; })); // using ES6 spread operator

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

根据数据范围设置域

1 个答案: