2

I've been working up a graph based on sub groups as illstrated here: d3 bar chart with sub categories.

However, something's amiss with the scale of the data point versus the y axis. I would have thought that, no matter what the maximum value in the domain, the height of the data point in the graph would fit the corresponding value on the y axis. When I run this, though "250" does not come up to "250" mark on the y axis. What fundamental am I misunderstanding? Thx for your help!

My code:

var margin = {top: 35, right: 200, bottom: 20, left: 80},
    width = 960 - (margin.left + margin.right);
    height = 400 - (margin.top + margin.bottom);

var svg = d3.select("#d3space").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data=[250,250,250]; // a global
var data2=[data];
var coldomain=[];

console.log('data',data2);

var max=370

//        X AXIS SECTION

        var x = d3.scale.ordinal()
                .domain([1])
                .rangeRoundBands([0, width],0.08);

        var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

//        Y AXIS SECTION

        var y = d3.scale.linear()
            .domain([max,0])
            .range([0,height]);

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");


//        READ LEGEND ITEMS INTO D3 DEFAULT ARRAY OF 20 COLOURS
        var color = d3.scale.category10()
                .domain(data);

        svg.append("g") //"g" is DOM shorthand for a "group" object, which is a heuristic that lets you add things to everything in that group later
                .attr("class", "xAxis")
                .attr("transform", "translate(0," + height + ")") //this is responsible for moving axis from top (svg default) to bottom                
                .call(xAxis)
                .append("text")
                .attr("x", width+margin.left)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .style("font-size", "16px")
                .attr("transform", "translate(40,0), rotate(0)")
                .text("Month")
        ;

//        Y AXIS TITLE
        svg.append("g")
                .attr("class", "yAxis")
                .call(yAxis)
                .append("text")
                .attr("y", -17)
                .attr("dy", ".71em")
                .style("text-anchor", "middle")
                .style("font-size", "16px")
                .attr("transform", "translate(5,0), rotate(0)")
                .text("Users")
        ;


        var month = svg.selectAll('.grp')
            .data(data2)
            .enter()
            .append('g')
//          .attr("class", "g")
            .attr('transform', function (d, i) {
                console.log('i',i);
            return 'translate(' + x(i) + ', 0)';
        });


        month.selectAll("rect")
            .data(function(d) {
            console.log('d',d);
            return d; })
            .enter().append("rect")
            .attr("height", function(d) {
                console.log('d',d); 
                return y(d); })
            .attr("x", function(d,i) {
                console.log('x',i,x.rangeBand(),(i)*(x.rangeBand()/5));
                return (i)*(x.rangeBand()/5);})
            .attr("y", function(d,i) {return height-y(d);})
            .attr("width", 50)
            .style("fill", function(d,i) { 
                console.log('col',color('A'));
                return color(i); });
4

1 回答 1

4

您看到此行为是因为 SVG y 坐标来自页面顶部。也就是说，(0,0) 是左上角，随着 y 坐标的增加，您正在向下移动页面。这对于条形图的显示意味着您需要将初始位置 (y) 设置为 y 值，并将条形图的高度设置为空间的其余部分到 x 0 坐标，因为矩形向下延伸：

.attr("height", function(d) { return height-y(d); })
.attr("y", function(d,i) {return y(d);})

在这里完成 jsfiddle 。

于 2013-11-01T18:54:53.460 回答