如何在d3散點圖中繪製兩個軸的正值和負值？

我使用d3來構建散點圖，並且我對x和y軸的值都具有正值和負值。這是我第一次嘗試使用d3，並且從介紹性教程（如On the tenth day of Xmas, get dirty with data using d3.js）中收集，關鍵是正確設置x和y比例。如何在d3散點圖中繪製兩個軸的正值和負值？

接下來，我發現本教程：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時，我得到的結果似乎更糟糕。

任何解釋最好的方法去處理兩個軸的正值和負值將不勝感激。讓我知道如果我失去了明顯的東西。我將這個例子從一個更大的項目中整合到一起，使其儘可能具體且易於閱讀。

謝謝！

來源

2012-05-01 eyount

剛剛意識到一個有序的規模是絕對不會去爲y軸的方式。在閱讀適用於條形圖教程的序數標度的API文檔後，因爲y軸不代表一組值，而是代表條形圖的假設類別。研究x軸和y軸的線性比例。任何想法爲什麼y軸應該水平上升？ – eyount

對於使用負值的軸沒有什麼特別之處 - 您應該簡單地爲軸使用線性刻度，並將域設置爲[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] });

來源

2012-05-01 19:04:24 nrabinowitz

如何在d3散點圖中繪製兩個軸的正值和負值？

回答

相關問題