d3.js - 如何使用 d3 在散点图中绘制两个轴的正值和负值？

Question

我正在使用 d3 来构建散点图，并且我对 x 和 y 轴的一组值都有正值和负值。这是我第一次尝试使用 d3，我是从介绍性教程中收集的，例如 On the tenth day of Xmas, get dirty with data using d3.js ，关键是正确设置 x 和 y 比例。

接下来，我找到了这个教程:Bar Chart with Negative Values ，这几乎帮助我做对了(我认为)。我的数据集太大而不能放在这里，但这里是我有一个数据样本可以使用的代码:

<div id="compareAll"></div>
<script>
window.onload = function() {

var dataSet = [ [4,4], [-4,4], [-4,-4], [4,-4], ];
var x0 = Math.max(-d3.min(dataSet[0]), d3.max(dataSet[0]));
var xScale = d3.scale.ordinal()
             .domain([-x0,x0])
             .range([0,10]);
var yScale = d3.scale.ordinal()
             .domain(d3.range(dataSet[1])
             .rangeRoundBands([0,10]);

var svg = d3.select("#compareAll")
.append("svg")
.attr("width", 10)
.attr("height",10)

svg.selectAll("circle")
.data(dataSet)
.enter()
.append("circle")
.attr("cx", function(d) {
      return xScale(d[0]); 
})
.attr("cy", function(d) {
      return yScale(d[1]); 
})
.attr("r",4); 

var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(1);

var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(1);

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

svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(10,0)")
.call(yAxis);

}

</script>

坦率地说，我不明白条形图示例中序数刻度的使用，但是当我取出它并使用与 xScale 相同的语法制作 yScale 时，我得到的结果似乎更糟。

任何有关处理两个轴的正值和负值的最佳方法的解释都将不胜感激。如果我遗漏了一些明显的东西，请告诉我。我将这个来自一个更大项目的示例放在一起，以使其尽可能具体和易于阅读。

谢谢!

Answer 1

对轴使用负值没有什么特别之处 - 您应该简单地对轴使用线性刻度，并将域设置为 [min, max] ，其中 min很可能是负面的。

在此处查看代码的工作版本:http://jsfiddle.net/nrabinowitz/qN5Sa/

对此有几点说明:

您绝对应该对散点图使用线性标度，除非您想要更多的矩阵。标准的 x 尺度可能如下所示:

var xScale = d3.scale.linear()
     .domain([-5, 5])
     .range([0,w]);

d3.svg.axis()组件包括一个 .orient()设置 - 默认情况下，这是 "bottom" ，即横轴，线下方有数字。要使 y 轴方向正确，请使用 .orient('left') .

我没有包含根据您的数据确定每个轴的最小/最大域的代码，因为我认为这会使示例复杂化。但是，如果您不知道数据的界限，则可以很容易地做到这一点:

// assuming data like [[x0,y0], [x1,y1]]
var xmin = d3.min(data, function(d) { return d[0] }),
    xmax = d3.max(data, function(d) { return d[0] }),
    ymin = d3.min(data, function(d) { return d[1] }),
    ymax = d3.max(data, function(d) { return d[1] });