Javascript 为什么我的旋转记号值没有完全显示出来？

我正在制作一个图表，其中整个svg对象和刻度值应该在给定的高度限制内。我想知道为什么我旋转的刻度值没有完全显示出来。高度是100px，我希望我的图表和刻度值在100之内。我试过了

.attr（“变换”、“缩放（1,1.4）”）

功能，但没有用。这是到目前为止的代码

数据是这个，下面是绘制图表的代码

 { 
  "Height" : 100,
  "Width" : 250,
"margins" : {
    "top": 10,
    "left": 20,
    "right": 10,
    "bottom": 20
  },

  "data":[
          {
             "fruit" : "apple",
             "initialsale" : 40,
             "totalsale": 600
           },
           {
              "fruit" : "orange",
              "initialsale" : 40,
              "totalsale": 60
            },
          {
            "fruit" : "mango",
            "initialsale" : 1420,
            "totalsale": 6000
          }
        ]
}

函数堆栈图（）{
数据={
“高度”：100，
“宽度”：250，
“保证金”：{
“前10名”，
“左”：20，
“对”：10，
“底部”：20
},
“数据”：[
{
“水果”：“苹果”，
“初始销售”：40，
“总销售额”：600
},
{
“水果”：“橙色”，
“初始销售”：40，
“总销售额”：60
},
{
“水果”：“芒果”，
“首次出售”：1420，
“总销售额”：6000
}
]
};
var保证金=data.margins；
var top=margin.top，
bottom=margin.bottom，
左=边距。左，
右=margin.right，
宽度=数据。宽度，
高度=数据高度，
data=data.data；
变量宽度=宽度-左-右，
高度=高度-顶部-底部；
var svg=d3。选择（“堆栈图”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//分割功能
var-div=0；
如果（宽度>50&&Width100&&Width200&&Width300&&Width400&&Width500&&Width600&&Width800）{
div=3.0
}
var PAR＝宽度/ div；
//var scale_参数=宽度/par；
var数据集=[]；
var arr1=[]；
var arr2=[]；
data.forEach（函数（d）{
var currentObj={}
currentObj[“os”]=d.os；
currentObj[“值”]=d.总计；
当前目标[“百分比”]=（d.初始/d.总计）*100；
arr1.推力（currentObj）；
currentObj={}
currentObj[“os”]=d.os；
currentObj[“值”]=d.总计；
当前目标[“百分比”]=（（d.总计-d.初始）/d.总计）*100；
arr2.推力（currentObj）；
}
);
数据集=[{
数据：arr1，
姓名：'首字母'
},{
数据：arr2，
名称：'剩余'
}];
var series=dataset.map（函数（d）{
返回d.name；
}),
dataset=dataset.map（函数（d）{
返回d.data.map（函数（o，i）{
//构造它，使您的数字
//轴（堆叠量）为y轴
返回{
y:百分之o，
x:o.os，
v:o值
};
});
}),
stack=d3.layout.stack（）；//.layout在v3中
堆栈（数据集）；
var h1=宽度*0.7；
//设置x、y和颜色
var x=d3.scale.ordinal（）
.domain（数据集[0].map（函数（d）{return d.x；}））
.rangeRoundBands（[0，宽度]，0.15）；
变量y=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d3.max（d，函数（d）{返回d.y0+d.y；}）；}）]）
.范围（[高度，0]）；
变量颜色=[“#14a900”、“#CCCC”]；
//定义和绘制轴
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（5）
.尺寸（1）
.tickFormat（函数（d）{return d}）
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
//为每个系列创建组，为每个段创建矩形
var group=svg.selectAll（“g.cost”）
.数据（数据集）
.enter（）.append（“g”）
.attr（“类别”、“成本”）
.style（“fill”，函数（d，i）{返回颜色[i]；}）；
//堆垛钢筋的高度计算
//y0将是基础，y是y0上的堆叠钢筋
var=0；
var-cr=0；
var heightsof=[]；
var rects=groups.selectAll（“rect”）
.data（函数（d）{return d；}）
.输入（）
.append（“rect”）
//.attr（“变换”、“比例（1,1.4）”）
.attr（“x”，函数（d）{返回x（d.x）；}）
.attr（“y”，函数（d）{
关键=y（d.y0+d.y）；
回归至关重要；
})
.attr（“高度”，功能（d）{
返回高度-y（d.y）；
})
.attr（“宽度”，x.rangeBand（））
//获取总条的长度
//倾斜角度
var-calh=0；
对于（i=0；ix）{
bool.push（真）；
}
否则{
bool.push（假）；
计数器++；
}
z=数学最大应用（数学，y）；
})
.样式（“文本锚定”，函数（d，i）{
if（rect_width20&&rect_width0&&bool[i]==false）{
返回“translate（-10），+（（y[i]/3）+12）+”）rotate（-45）”；//-（90角*100）+”）；//基于最大角度旋转以正确对齐
}
如果（角度>0&&bool[i]==真）{
返回“translate（-10），+（（y[i]/3）+8）+”）rotate（-45）//“+-（90角度*100）+”）；//基于最大角度旋转以正确对齐
}
否则{
返回“translate（-10），+（（y[i]/3）+12）+”）rotate（“+-（90+角度*10）+”）；//基于最大角度旋转以正确对齐
}
}
});
}

stackChart（）；

您需要做的是更改第二个

的

高度值（图例一）从
100
到
120
。我对
d3.js
或您的脚本了解不够，无法在您的脚本内部实现。我可以在
生成后，编写一个
javascript
代码片段来动态执行此操作，但这将是
hack
-ish。

我想有了这些信息，再加上你对自己剧本的了解，你可以从传说的源头上修复这个问题

按cour
transform: scale(factor);
transform-origin:left; /* keep it aligned on left side */