Question

我正在关注Mike Bostock's example以生成具有正值和负值的水平条形图。

我正在尝试集中y轴，因此每侧总是有相同长度的x轴。但是找不到任何例子。我希望x轴的比例对数据保持敏感，所以我不想指定范围。

我无法得到他给工作的榜样。：

对于定量比例，使用d3.extent：
计算数据域（最小值和最大值）

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

按比例缩小比例会将范围略微扩展到最接近的圆数。如果你想要零值在画布的中间居中，采取更大的按幅度划分的最小值和最大值，或者简单地对其进行硬编码期望的域名。

有关如何正确计算域名或欢迎帮助的任何示例！

Answer 1

首先，让我们发现哪一个更大，最小或最大值：

var greater;

if (Math.abs(d3.min(data, function(d){ return d.value})) > Math.abs(d3.max(data, function(d){ return d.value}))) {
  greater = Math.abs(d3.min(data, function(d){ return d.value}));
  } else {
  greater = Math.abs(d3.max(data, function(d){ return d.value}));
  };

然后设置比例：

var x = d3.scale.linear()
 .domain([greater * -1, greater])
 .range([0, width]);

ds3.js水平条 - 如何集中y轴？

1 个答案: