Wie kann ich positive und negative Werte für beide Achsen in einem Streudiagramm mit d3 darstellen?

Question

Ich benutze d3, um ein Streudiagramm zu erstellen, und die Menge der Werte, die ich für die x- und y-Achsen habe, haben beide positive und negative Werte. Dies ist mein erster Versuch, d3 zu verwenden, und ich habe aus einführenden Tutorials wie On the tenth day of Xmas, get dirty with data using d3.js gelernt, dass der Schlüssel das richtige Einrichten der X- und Y-Skalen ist.

Als nächstes fand ich dieses Tutorial: Bar Chart with Negative Values, das hat mir fast geholfen, es richtig zu machen (denke ich). Mein Datensatz zu kräftig ist hier zu platzieren, aber hier ist der Code Ich habe eine Probe meiner Daten mit arbeiten: Ehrlich gesagt

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

, verstehe ich nicht die Verwendung der Ordinalskala im Balkendiagramm Beispiel, aber ich habe schlechtere Ergebnisse bekommen, als ich es herausgenommen habe und die yScale mit der gleichen Syntax wie die xScale gemacht habe.

Jede Erklärung der besten Art, mit positiven und negativen Werten für beide Achsen zu arbeiten, wäre willkommen. Lass es mich wissen, wenn ich etwas Offensichtliches vermisse. Ich gehe dieses Beispiel aus einem viel größeren Projekt zusammen, um es so spezifisch und leicht lesbar wie möglich zu machen.

Danke!

Answer 1

Es ist nichts Besonderes, negative Werte für Ihre Achsen zu verwenden - Sie sollten einfach lineare Skalen für Ihre Achsen verwenden und die Domäne auf [min, max] setzen, wobei min durchaus negativ sein könnte.

eine funktionierende Version des Codes Siehe hier: http://jsfiddle.net/nrabinowitz/qN5Sa/

Einige Anmerkungen gegeben:

• Sie definitiv Linearmaßstäbe für einen Scatterplot verwenden sollten, wenn Sie mehr von einer Matrix wollen. Eine Standard-x-Skala könnte wie folgt aussehen:

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

• d3.svg.axis() Die Komponente umfasst ein .orient() setting - standardmäßig ist dies "bottom", das heißt eine horizontale Achse mit Zahlen unter der Linie. Verwenden Sie .orient('left'), um eine korrekt ausgerichtete Y-Achse zu erstellen.

• Ich habe den Code nicht zur Bestimmung der Min/Max-Domäne für jede Achse basierend auf Ihren Daten hinzugefügt, weil ich dachte, dass es das Beispiel verkomplizieren würde. Aber Sie können dies tun, ziemlich leicht, wenn Sie die Grenzen Ihrer Daten nicht kennen:

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