反转Y轴D3 [英] reversed Y-axis D3

问题描述

我对D3很新。我创建了一个条形图，我的Y轴以某种方式反转（也似乎比例不正确）。我真的不能自己想出来。这是 Jsfiddle的链接。

I am pretty new to D3. I created a bar plot and my Y axis is reversed somehow (also seems like the scale is not right). I really couldn't figure it out by myself. Here is the link for Jsfiddle.

这是我工作的代码

提前感谢，对不起我的英语。

Thanks in advance and sorry for my English.

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");

推荐答案

也许这会有帮助。

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

几个备注：

1. 我将您的y域范围从 .range（[0，h-margin]）; 到 .range（[h-margin，0]）; y轴标记发生错误的方向，因为浏览器考虑的原点（0,0）指向左上角，而不是底部 -

1. I reversed your y domain range from .range([0, h-margin]); to .range([h-margin, 0]); This will fix the issue of the y-axis marks going in the wrong direction because the browser consider's the origin (0,0) point to the the upper-left corner, and not the bottom-left corner like in math.

由于这种逆转，我不得不调整你的 .attr（'height'）和 .attr（'y'）。

Because of this reversal I had to tweak your .attr('height') and .attr('y').

条形图中的bar是要意识到 yscale（0）会给你barchart底部的像素位置。然后，您可以通过 yscale（value） - yscale（0）来获取条形的像素高度。

A nice way to find the height of bar in a bar chart is to realize that the yscale(0) will give you the pixel-position of the bottom of the barchart. You can then do yscale(value) - yscale(0) to get the pixel-height of your bars.

这篇关于反转Y轴D3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！