Javascript D3水平堆叠条形图轴切断_Javascript_Svg_D3.js

Javascript D3水平堆叠条形图轴切断

javascript svg d3.js

Javascript D3水平堆叠条形图轴切断,javascript,svg,d3.js,Javascript,Svg,D3.js,希望有人能帮助我，我有一个小问题，水平轴标签100被切断的堆叠水平条形图结束。我似乎无法找出代码中的错误。提前感谢你的帮助。请参阅下面的代码 <!DOCTYPE html> --> <html> <head> <title>Horizontal stacked bar</title> <meta charset="

希望有人能帮助我，我有一个小问题，水平轴标签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>


-->
水平堆积钢筋
.安讯士{
字体大小：14px；
}
#h{
}
var保证金={
前12名，
左：15，
右：15，
底数：14
};
var w=500-边际。左侧-边际。右侧；
var h=300-margin.top-margin.bottom；
变量数据集=[
[
{x:0，y:20}
],
[
{x:0，y:30}
],
[
{x:0，y:50}
]    
];
//设置堆栈方法
var stack=d3.layout.stack（）；
//数据，堆叠
堆栈（数据集）；
//设置天平
var xScale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d3.max（d，函数（d））
{返回d.y0+d.y；}）；}）]）
//请注意，使用边距+右键可获得轴到刻度的宽度
.范围（[0，w+边距.右]）；
var yScale=d3.scale.ordinal（）
.domain（d3.range（数据集[0]。长度））
.范围圆带（[0，w]，0.05）；
//通过10步序数刻度轻松获取颜色
var colors=d3.scale.category10（）；
//或者让你自己的颜色变得苍白
var color=d3.scale.ordinal（）
.范围（[“1459D9”、“148DD9”、“87ceeb”、“daa520”）；
//颜色代码的好网站http://www.colorpicker.com/113EF2
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
;
//为每行数据添加一个组
var groups=svg.selectAll（“g”）
.数据（数据集）
.输入（）
.附加（“g”）
.style（“填充”，函数（d，i）{返回颜色（i）；}）
;
//为每个数据值添加一个rect
var rects=groups.selectAll（“rect”）
.data（函数（d）{return d；}）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{return xScale（d.y0）；}）/+99将向右移动轴
.attr（“y”，180）
.attr（“高度”，90）
.attr（“宽度”，yScale.rangeBand（））；
//添加一个轴
var xAxis=d3.svg.axis（）
.比例（xScale）；
svg.append（“g”）
.呼叫（xAxis）
;

对于x和y两个维度，使用

xScale

确实会更好。毕竟，y实际上是一个宽度。我的意思是：

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

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

这是最新的。您可以继续对右边距值和任何数据y值进行更改（我在代码中对此进行了注释），您可以看到此解决方案具有良好的扩展性。

非常感谢。有趣的xscale d.y是如何给出这三个矩形的。如果您像这样登录到控制台，

.attr（“width”，function（d）{console.log（d.y）；return xScale（d.y）；}）

，您将看到它输出3个值，20、30、50，即矩形的宽度。换句话说，D3为数据集中的每个数据项调用函数。看看这个。

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