¿Cómo puedo trazar valores positivos y negativos para ambos ejes en un diagrama de dispersión con d3?

Question

Estoy usando d3 para construir un diagrama de dispersión y el conjunto de valores que tengo para los ejes xey tienen valores positivos y negativos. Este es mi primer intento de utilizar d3 y he deducido de los tutoriales introductorios, como On the tenth day of Xmas, get dirty with data using d3.js, que la clave está configurando correctamente las escalas xe y.

A continuación, encontré este tutorial: Bar Chart with Negative Values, que casi me ha ayudado a hacerlo bien (creo). Mi conjunto de datos es demasiado fuerte para colocar aquí, pero aquí está el código que tengo una muestra de mis datos para trabajar con:

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

Francamente, no entiendo el uso de la escala ordinal en el gráfico de barras Por ejemplo, sin embargo obtuve resultados peores cuando lo saqué e hice el yScale con la misma sintaxis que el xScale.

Se agradecerá cualquier explicación sobre la mejor manera de trabajar con valores positivos y negativos para ambos ejes. Avíseme si me falta algo obvio. Completé este ejemplo de un proyecto mucho más grande para hacerlo lo más específico y fácil de leer posible.

Gracias!

Answer 1

No tiene nada de especial el uso de valores negativos para sus ejes; simplemente debe usar escalas lineales para sus ejes y configurar el dominio en [min, max], donde min bien podría ser negativo.

Ver una versión de trabajo de su código aquí: http://jsfiddle.net/nrabinowitz/qN5Sa/

Algunas notas sobre esto:

• definitivamente debe utilizar escalas lineales de un diagrama de dispersión, a menos que desee más de una matriz. A x-escala estándar podría tener este aspecto:

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

• El componente d3.svg.axis() incluye un ajuste .orient() - de forma predeterminada, esto es "bottom", es decir, de un eje horizontal con los números debajo de la línea. Para hacer un eje y orientado correctamente, use .orient('left').

• No incluí el código para determinar el dominio mínimo/máximo para cada eje en función de sus datos, porque pensé que complicaría el ejemplo. Pero se puede hacer esto con bastante facilidad si no conoce los límites de los datos:

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