D3 Horizontal stacked bar chart axis cut off

Hope someone can help, I have a slight problem in that the horizontal axis label 100 gets cut off the end of the stacked horizontal barchart. I can't seem to figure out what is wrong in the code. Thanks in advance for your help. Please see code below.

        <!DOCTYPE html>
            -->
    <html>
        <head>
            <title>Horizontal stacked bar</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <script type="text/javascript" src="d3/d3.js"> </script>

            <style>
                .axis{
                    font-size: 14px;

                }
                #h{

                }
            </style>


        </head>
        <body>
                            <script>





    var margin = {
        top: 12,
        left: 15,
        right: 15,        
        bottom: 14
    };



    var w = 500 - margin.left - margin.right;
    var   h = 300 - margin.top - margin.bottom;



    var dataset = [

        [
            {x:0,y:20}
        ],
        [
            {x:0,y:30}
        ],

         [
            {x:0,y:50}
                       ]    


    ];

    //Set up stack method
    var stack = d3.layout.stack();

    //Data, stacked
    stack(dataset);

    //Set up scales


    var xScale = d3.scale.linear()
    .domain([0,d3.max(dataset, function(d) {return d3.max(d, function(d) 
                                              {return d.y0 + d.y;}); }) ]) 
    // note use of margin + right to get axis to scale width
            .range([0, w + margin.right]);


    var yScale = d3.scale.ordinal()
    .domain(d3.range(dataset[0].length))
    .rangeRoundBands([0,w ], 0.05);



    //Easy colors accessible via a 10-step ordinal scale
    var colors = d3.scale.category10();
    //or make your own colour palet
    var color = d3.scale.ordinal()
            .range(["#1459D9", "#148DD9", "#87ceeb", "#daa520"]);

    // good site for colour codes http://www.colorpicker.com/113EF2

    //Create SVG element
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    ;

    // Add a group for each row of data
    var groups = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .style("fill", function(d,i){return color(i);})



    ;



    // Add a rect for each data value
    var rects = groups.selectAll("rect")
    .data(function(d) { return d; })
    .enter()
    .append("rect")

    .attr("x", function(d) {return xScale(d.y0)  ;}) //+99 will move axis right

    .attr("y", 180)

    .attr("height", 90)
    .attr("width", yScale.rangeBand());       



    //Add an axis

    var xAxis = d3.svg.axis()
            .scale(xScale);

    svg.append("g")    
        .call(xAxis)
        ;


    </script>
        </body>
    </html>

标签： javascript svg d3.js

1条回答

姐就是有狂的资本

2楼-- · 2019-09-17 10:55

You are really better off using the xScale for both dimensions, x and y. After all, your y is really a width. Here is what I mean:

...
//Set up scales
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
        return d3.max(d, function (d) {
            return d.y0 + d.y;
        });
    })])
    .range([0, w]); // no need to tamper with margins since w already accounts for that
...
// Add a rect for each data value
var rects = groups.selectAll("rect")
    .data(function (d) {return d;})
  .enter()
  .append("rect")
    .attr("x", function (d) {
        return xScale(d.y0); // use x scale
    })
    .attr("y", 50)
    .attr("height", 50)
    .attr("width", function (d) {
        return xScale(d.y); // use x scale
    })
...

And here is the updated FIDDLE. You can go ahead and make changes to the right margin value and any of your data y values (I placed comments in the code to that effect) and you can see that this solution scales well.

0人赞添加讨论(0) 举报

D3 Horizontal stacked bar chart axis cut off

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间