डी 3.जेएस

Question

में एक सामान्य स्केल के साथ एक लेबल लेबल वाला एक्स-एक्सिस बनाना, मैं एक 3 डी अक्ष के साथ d3.js में एक बार चार्ट बना रहा हूं जिसका टिक चार्ट के साथ चार्ट को लेबल करना चाहिए। क्या कोई यह समझा सकता है कि क्रमिक पैमाने "मानचित्र" x संबंधित बार पदों पर कैसे टिकता है? विशेष रूप से, यदि मैं x टिक लेबल को टेक्स्ट मानों की सरणी के साथ बार चार्ट में संबंधित बार में निर्दिष्ट करना चाहता हूं।

वर्तमान में मैं निम्नलिखित के रूप में डोमेन सेट कर रहा हूं:

var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"]; 
    var xScale = d3.scale.ordinal() 
       .domain(labels) 

हालांकि, 1-19 के मूल्यों पाठ लेबल के बाद दिखा रहे हैं।

के रूप में इस बेला में देखी गई:

http://jsfiddle.net/chartguy/FbqjD/

एसोसिएटेड फिडल स्रोत कोड:

//Width and height 
      var margin = {top: 20, right: 20, bottom: 30, left: 40};   
      var width = 600 - margin.left - margin.right; 
      var height= 500-margin.top -margin.bottom; 
      var w = width; 
      var h = height; 


      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
          11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 

      var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"]; 
      var xScale = d3.scale.ordinal() 
      .domain(labels) 
          .rangeRoundBands([margin.left, width], 0.05); 
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 


      var yScale = d3.scale.linear() 
          .domain([0, d3.max(dataset)]) 
          .range([h,0]); 


      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      //Create bars 
      svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect") 
       .attr("x", function(d, i) { 
        return xScale(i); 
       }) 
       .attr("y", function(d) { 
        return yScale(d); 
       }) 
       .attr("width", xScale.rangeBand()) 
       .attr("height", function(d) { 
        return h - yScale(d); 
       }) 
       .attr("fill", function(d) { 
        return "rgb(0, 0, 0)"; 
       }); 

      svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + 0 + ")") 
     .call(xAxis); 

      //Create labels 
      svg.selectAll("text") 
       .data(dataset) 
       .enter() 
       .append("text") 
       .text(function(d) { 
        return d; 
       }) 
       .attr("x", function(d, i) { 
        return xScale(i) + xScale.rangeBand()/2; 
       }) 
       .attr("y", function(d) { 
        return h - yScale(d) + 14; 
       }); 

Answer 1

आप स्पष्ट रूप से d3.svg.axis().tickValues(*array*) का उपयोग कर एक क्रमसूचक अक्ष की टिक मूल्यों को निर्धारित कर सकते हैं।

लेकिन यह ऐसा करने का एक अजीब तरीका है क्योंकि यह खतरनाक रूप से आपकी चाबियाँ और मूल्यों को अलग करता है, जिसका अर्थ है कि आपको स्केल को मैन्युअल रूप से संरेखित करने और सुनिश्चित करने के लिए सावधानी बरतनी है कि आपका डेटा सही तरीके से मेल खाता है। यह एक ऑब्जेक्ट में चाबियाँ और मानों को समूहबद्ध करने में मदद करता है और फिर प्रारूप का उपयोग करता है:

 axis.domain(array.map(function (d) { return d.value; })) 

अपने अक्ष डोमेन को मैप करने के लिए।

मैंने आपके डेटा और पहेली को फिर से किया है जो मैं d3 way के रूप में देखता हूं। (यह भी ध्यान दें कि मैंने मज़े के लिए कुछ और बदलाव किए हैं, अर्थात् मार्जिन में सुधार किया है और धुरी संरेखण को साफ किया है, आदि)