मैं डी 3 के साथ स्कैटर प्लॉट में दोनों अक्षों के लिए सकारात्मक और नकारात्मक मान कैसे लगा सकता हूं?

Question

मैं स्कैटर प्लॉट बनाने के लिए डी 3 का उपयोग कर रहा हूं और एक्स और वाई अक्षों के लिए मेरे मानों के सेट में सकारात्मक और नकारात्मक मान हैं। यह डी 3 का उपयोग करने का मेरा पहला प्रयास है और मैंने शुरुआती ट्यूटोरियल जैसे On the tenth day of Xmas, get dirty with data using d3.js से एकत्र किया है, कि कुंजी एक्स और वाई स्केल को सही तरीके से स्थापित कर रही है।

अगला, मुझे यह ट्यूटोरियल मिला: 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 बना दिया तो मुझे लगता है कि यह बदतर परिणाम है।

दोनों अक्षों के लिए सकारात्मक और नकारात्मक मूल्यों के साथ काम करने के बारे में जाने का सबसे अच्छा तरीका किसी भी स्पष्टीकरण की सराहना की जाएगी। अगर मुझे कुछ याद आ रही है तो मुझे बताएं। मैं इस उदाहरण को एक बड़ी परियोजना से एक साथ जोड़कर इसे यथासंभव विशिष्ट और आसानी से पढ़ने में आसान बनाता हूं।

धन्यवाद!

Answer 1

आपकी अक्षों के लिए नकारात्मक मानों का उपयोग करने के बारे में कुछ भी खास नहीं है - आपको बस अपनी अक्षों के लिए रैखिक स्केल का उपयोग करना चाहिए, और डोमेन को [min, max] पर सेट करना चाहिए, जहां min नकारात्मक हो सकता है। http://jsfiddle.net/nrabinowitz/qN5Sa/

इस पर कुछ नोट::

• आप निश्चित रूप से रैखिक तराजू एक scatterplot के लिए, का उपयोग करना चाहिए जब तक आप एक मैट्रिक्स के और अधिक चाहते हैं

  अपने कोड की एक काम संस्करण यहाँ देखें। एक मानक एक्स पैमाने पर इस प्रकार दिखाई देंगे:

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

• d3.svg.axis() घटक एक .orient() सेटिंग शामिल हैं - डिफ़ॉल्ट रूप से, इस "bottom" है, यानी रेखा से नीचे की संख्या के साथ एक क्षैतिज अक्ष है। सही ढंग से उन्मुख वाई-अक्ष बनाने के लिए, .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] });