d3.js - 使用链式转换时强制 y 轴为 0

Question

我是 D3 的新手，正在研究 Chained Transitions 的修改版本：http: //bl.ocks.org/mbostock/3903818。

然而，我遇到的一个问题是强制 y 轴从 0 开始。通常，在声明其他变量时更改 y 域和范围属性很简单，但在转换函数的上下文中，我是遇到问题。这是代码：http: //jsfiddle.net/maureenlinke/DCc6g/

我相信问题在这里：

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
  d3.min(homes, function(c) { return d3.min(c.values, function(v) { return v.price; }); }),
  d3.max(homes, function(c) { return d3.max(c.values, function(v) { return v.price; }); })
  ]);

谢谢，

莫琳

Answer 1

您只需要修复域：

var maxPrice = d3.max(homes, function(c) { 
    return d3.max(c.values, function(v) { return v.price; }); 
});
y.domain([0, maxPrice]);

Answer 2

d3.extent 函数以数组 [min, max] 的形式返回数据的最小/最大范围。

通常，您将编写以下代码：

y.domain( d3.extent(homes, function(d) { return d.price; }) );

所以以下应该工作：

var yRange = d3.extent(homes, function(d) { return d.price; });
y.domain( [0, yRange[1] ); // Force the min to 0