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

我用d3建立了一个散点图，x轴和y轴的一组值都有正值和负值。这是我第一次尝试使用d3，我从入门教程中了解到，关键是正确设置x和y比例

接下来，我发现了这个教程：，它几乎帮助我正确地理解了它。我的数据集太大，无法放在这里，但下面是我的数据示例代码：

<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时，我得到了更糟糕的结果

如果您能解释一下使用两个轴的正值和负值的最佳方法，我们将不胜感激。如果我遗漏了一些明显的东西，请告诉我。我从一个更大的项目中总结了这个例子，以使它尽可能具体和易于阅读

---

谢谢

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

请在此处查看代码的工作版本：

关于这一点，请注意：

除非需要更多的矩阵，否则绝对应该使用线性比例作为散点图。标准x刻度可能如下所示：

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

d3.svg.axis组件包括一个.orient设置-默认情况下，这是底部，即线下带有数字的水平轴。要制作正确定向的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] });

---

我刚刚意识到顺序刻度绝对不是y轴的方式。在阅读了应用于条形图教程的顺序比例的API文档之后，因为y轴并不代表一组值，而是条形图所代表的假设类别。研究使用x轴和y轴的线性比例。知道为什么y轴应该水平向上吗？