如何在d3的散点图中绘制两个轴的正值和负值？ [英] How can I plot positive and negative values for both axes in a scatter plot with d3?

问题描述

我使用d3来构建散点图，x和y轴的值集合都有正值和负值。这是我第一次尝试使用d3，而且我从介绍性教程（例如）在圣诞节的第十天，使用d3.js 弄脏数据，关键是正确设置x和y标度。

I'm using d3 to build a scatter plot and the set of values I have for the x and y axes both have positive and negative values. This is my first attempt at using d3 and I've gathered from introductory tutorials such as On the tenth day of Xmas, get dirty with data using d3.js, that the key is setting up the x and y scales correctly.

接下来，我找到了本教程：带有负值的条形图，这几乎帮助我得到正确（我想）。我的数据集太大，不能放在这里，但这里是我有一个样本的我的数据的工作代码：

Next, I found this tutorial: Bar Chart with Negative Values, which has almost helped me get it right (I think). My data set is too hefty to place here, but here is the code I have a sample of my data to work with:

<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>

坦率地说，我不明白在条形图示例中使用序数刻度，但是我看起来糟糕的结果，当我拿出来，使yscale与xScale相同的语法。

Frankly, I don't understand the use of the ordinal scale in the Bar Chart example, however I got seemly worse results when I took it out and made the yScale with the same syntax as the xScale.

对于使用两个轴的正值和负值的最佳方式的任何解释都将不胜感激。让我知道，如果我错过了一些明显的东西。我通过这个例子从一个更大的项目，使其尽可能具体和易于阅读。

Any explanation of the best way to go about working with positive and negative values for both axes would be appreciated. Let me know if I'm missing something obvious. I through together this example from a much larger project as to make it as specific and easy to read as possible.

谢谢！

推荐答案

您的轴 - 您应该简单地为您的轴使用线性刻度，并将域设置为 [min，max] ，其中 min 可能为负。

There's nothing special about using negative values for your axes - you should simply be using linear scales for your axes, and setting the domain to [min, max], where min might well be negative.

请参阅您的代码的工作版本： http://jsfiddle.net/nrabinowitz/qN5Sa/

See a working version of your code here: http://jsfiddle.net/nrabinowitz/qN5Sa/

关于此的一些注意事项：

A few notes on this:

• 除非你想要更多的矩阵，否则你一定要对散点图使用线性尺度。标准x缩放比例可能如下所示：

• You should definitely use linear scales for a scatterplot, unless you want more of a matrix. A standard x-scale might look like this:

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

d3.svg.axis（）组件包括 .orient（）设置 - 默认情况下，这是bottom轴线上的数字。要正确定向y轴，请使用 .orient（'left'）。

The d3.svg.axis() component includes an .orient() setting - by default, this is "bottom", i.e. a horizontal axis with numbers below the line. To make a correctly oriented y-axis, use .orient('left').

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

I didn't include the code to determine the min/max domain for each axis based on your data, because I figured it would complicate the example. But you can do this fairly easily if you don't know the bounds of your data:

// 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] });

这篇关于如何在d3的散点图中绘制两个轴的正值和负值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！