Question

希望有人可以提供帮助，我有一个小问题，因为横轴标签100从堆叠的水平条形图的末端被切掉。我似乎无法弄清楚代码中的错误。在此先感谢您的帮助。请参阅下面的代码。

        <!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>

Answer 1

对于两个维度x和y，最好使用xScale。毕竟，你的y实际上是一个宽度。这就是我的意思：

...
//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
    })
...

这是更新的FIDDLE。您可以继续更改正确的边距值和任何数据y值（我在代码中添加了注释），您可以看到此解决方案可以很好地扩展。

D3水平堆叠条形图轴切断

1 个答案: