उलटा वाई-अक्ष डी 3

Question

मैं डी 3 के लिए काफी नया हूं। मैंने एक बार साजिश बनाई और मेरा वाई अक्ष किसी भी तरह उलट दिया गया है (ऐसा लगता है कि पैमाने सही नहीं है)। मैं वास्तव में इसे अपने आप से नहीं समझ सका। Jsfiddle के लिए यहां the link है।

यह वह कोड है जिस पर मैं काम कर रहा हूं, यदि आप इसे कहीं और कोशिश करना चाहते हैं।

अग्रिम धन्यवाद और मेरी अंग्रेजी के लिए खेद है।

var w = 700; 
var h = 400; 
var margin = 40; 

var dataset = [ 
{key:1,value:4000}, 
{key:2,value:3500}, 
{key:3,value:4400}, 
{key:4,value:3250}, 
{key:5,value:4785}, 
{key:6,value:3600}, 
{key:7,value:3200} 
]; 


var key = function(d) { 
    return d.key; 
}; 

var value = function(d) { 
    return d.value; 
}; 
console.log(dataset); 

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

var xScale = d3.scale.ordinal() 
       .domain(d3.range(dataset.length+1)) 
       .rangeRoundBands([40, w], 0.05); 

var yScale = d3.scale.linear() 
        .domain([0, 5000]) 
        .range([0, h-40]); 

var x_axis = d3.svg.axis().scale(xScale); 
var y_axis = d3.svg.axis().scale(yScale).orient("left"); 


d3.select("svg") 
    .append("g") 
     .attr("class","x axis") 
     .attr("transform","translate(0,"+(h-margin)+")") 
    .call(x_axis); 

d3.select("svg") 
    .append("g") 
     .attr("class","y axis") 
     .attr("transform","translate("+margin+",0)") 
    .call(y_axis); 

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

    //Tooltip 
.on("mouseover", function(d) { 
    //Get this bar's x/y values, then augment for the tooltip 
    var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand()/2; 
    var yPosition = parseFloat(d3.select(this).attr("y")) + 14; 

    //Update Tooltip Position & value 
    d3.select("#tooltip") 
     .style("left", xPosition + "px") 
     .style("top", yPosition + "px") 
     .select("#value") 
     .text(d.value); 
    d3.select("#tooltip").classed("hidden", false) 
}) 
.on("mouseout", function() { 
    //Remove the tooltip 
    d3.select("#tooltip").classed("hidden", true); 
}) ; 

//Create labels 
svg.selectAll("text") 
    .data(dataset, key) 
    .enter() 
    .append("text") 
    .text(function(d) { 
     return d.value; 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) { 
     return xScale(i) + xScale.rangeBand()/2; 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.value) + 14; 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "white"); 

Answer 1

शायद इससे मदद मिलेगी।

http://jsfiddle.net/S575k/4/

कुछ नोट:

1. मैं .range([0, h-margin]); से .range([h-margin, 0]); यह करने के लिए अपने y डोमेन रेंज उलट y- अक्ष गलत दिशा में जा क्योंकि ब्राउज़र की पर विचार के निशान के मुद्दे ठीक कर देंगे मूल (0,0) ऊपरी-बाएं कोने पर इंगित करता है, और गणित की तरह नीचे-बाएं कोने नहीं।

2. इस उलटा होने के कारण मुझे आपके .attr('height') और .attr('y') को ट्विक करना पड़ा।

3. बार चार्ट में बार की ऊंचाई खोजने का एक अच्छा तरीका यह समझना है कि yscale(0) आपको ब्रैर्चर्ट के नीचे की पिक्सेल-स्थिति देगा। फिर आप अपने बार की पिक्सेल-ऊंचाई प्राप्त करने के लिए yscale(value) - yscale(0) कर सकते हैं।