Javascript d3轴和标签剪裁

我有一个带有y轴和标签的d3条形图。Y轴记号标签将被剪裁到Y轴条的比例。如何在Y轴上使用相同的缩放，但不剪裁记号标签？（参见轴底部的截断零点）

此外，我还想在缩放打印区域外添加x轴的文本。很明显，我对元素的位置有些不理解。我确实为此在SVG中留下了一些空白空间，但它仍然将所有内容剪切到SVG元素中空白区域内的缩放区域

这是一把小提琴：

---

如果有人感兴趣的话，这里是正在工作的JS。最后我重新定义了比例，包括了利润

var barPadding = 1; 
var margin = {top: 5, right: 100, bottom: 5, left: 5};

var w = $('#GECGplot').width();
var wM = ($('#GECGplot').width() - margin.left - margin.right);
var h = $('#GECGplot').height();
var hM = ($('#GECGplot').height() - margin.top - margin.bottom);
var barW = ( (w - margin.left - margin.right) / (plotData.length) );

var y = d3.scale.linear().domain([0, d3.max(plotData, function(d, i) { return parseFloat(d.fpkm); })]).
  rangeRound([(hM), 0]);

var ws = d3.scale.linear().domain([0, d3.max(plotData, function(d, i) { return plotData.length; })]).
  rangeRound([0, (wM)]);

//Create SVG element
var svg = d3.select("#GECGplot")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

// make the  bars
svg.selectAll("rect")
   .data(plotData)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
        return (i * barW);
    })
   .attr("y", function(d, i) {
        return y(parseFloat(d.fpkm));
    })
   .attr("width", (barW) - barPadding )
   .attr("height", function(d, i) {
        return (hM) - y(parseFloat(d.fpkm));
    })
   .attr("fill", function(d, i) {
        if (d.library_id == '<?=$l?>') return "rgb(0, 192, 0)";
        else return "rgb(192, 0, 0)";
    });

// Y axis
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(8);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + (w-margin.right) + ",0)")
    .call(yAxis);

// Y label
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "middle")
    .attr("dy", ".1em")
    .attr("transform", "translate(" + (w-(margin.right/2)) + ","+(hM/2)+"), rotate(90)")
    .text("FPKM");

// Legend header
svg.append("text")
    .attr("class", "legend")
    .attr("text-anchor", "left")
    .attr("y", 10)
    .attr("dy", ".2em")
    .attr("transform", "translate(10,10), rotate(0)")
    .text("<?= strtoupper($_REQUEST['gene_short_name']) ?> expression - <?= strtoupper($_REQUEST['library']) ?> vs compendium");

var barPadding=1；
var margin={顶部：5，右侧：100，底部：5，左侧：5}；
var w=$（'#GECGplot'）.width（）；
var wM=（$（'#GECGplot'）.width（）-margin.left-margin.right）；
var h=$（'#GECGplot'）.height（）；
var hM=（$（'GECGplot'）.height（）-margin.top-margin.bottom）；
var barW=（（w-margin.left-margin.right）/（plotData.length））；
var y=d3.scale.linear（）.domain（[0，d3.max（plotData，function（d，i）{return parseFloat（d.fpkm）；}]））。
量程（[（hM），0]）；
var ws=d3.scale.linear（）.domain（[0，d3.max（plotData，函数（d，i）{return plotData.length；}]））。
rangeRound（[0，（wM）]）；
//创建SVG元素
var svg=d3。选择（“GECGplot”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//做酒吧
svg.selectAll（“rect”）
.数据（绘图数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回（i*barW）；
})
.attr（“y”，函数（d，i）{
返回y（解析浮点（d.fpkm））；
})
.attr（“宽度”，（barW）-BARPADING）
.attr（“高度”，函数（d，i）{
返回值（hM）-y（解析浮点值（d.fpkm））；
})
.attr（“填充”，函数（d，i）{
if（d.library_id=''）返回“rgb（01920）”；
否则返回“rgb（192,0,0）”；
});
//Y轴
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“右”）
.蜱（8）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移”（+（w-margin.right）+”，0）
.呼叫（yAxis）；
//Y标签
svg.append（“文本”）
.attr（“类别”、“y标签”）
.attr（“文本锚定”、“中间”）
.attr（“dy”，“.1em”）
.attr（“变换”，“平移”（+（w-（margin.right/2））+”，“+（hM/2）+”，旋转（90）”）
.文本（“FPKM”）；
//图例标题
svg.append（“文本”）
.attr（“类”、“图例”）
.attr（“文本锚定”、“左”）
.attr（“y”，10）
.attr（“dy”，“.2em”）
.attr（“变换”、“平移（10,10）、旋转（0）”）
.文本（“表达与概要”）；

您的svg被限制在没有边距的区域。也就是说，您将“w”和“h”定义为图表的大小，但svg元素的创建正好是该大小。所以利润率不能被考虑在内

尝试：

---

或者类似。

我最终重新定义了具有相同效果的量表，但这是问题所在。谢谢。你是如何使用NVD3的？

var barPadding = 1; 
var margin = {top: 5, right: 100, bottom: 5, left: 5};

var w = $('#GECGplot').width();
var wM = ($('#GECGplot').width() - margin.left - margin.right);
var h = $('#GECGplot').height();
var hM = ($('#GECGplot').height() - margin.top - margin.bottom);
var barW = ( (w - margin.left - margin.right) / (plotData.length) );

var y = d3.scale.linear().domain([0, d3.max(plotData, function(d, i) { return parseFloat(d.fpkm); })]).
  rangeRound([(hM), 0]);

var ws = d3.scale.linear().domain([0, d3.max(plotData, function(d, i) { return plotData.length; })]).
  rangeRound([0, (wM)]);

//Create SVG element
var svg = d3.select("#GECGplot")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

// make the  bars
svg.selectAll("rect")
   .data(plotData)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
        return (i * barW);
    })
   .attr("y", function(d, i) {
        return y(parseFloat(d.fpkm));
    })
   .attr("width", (barW) - barPadding )
   .attr("height", function(d, i) {
        return (hM) - y(parseFloat(d.fpkm));
    })
   .attr("fill", function(d, i) {
        if (d.library_id == '<?=$l?>') return "rgb(0, 192, 0)";
        else return "rgb(192, 0, 0)";
    });

// Y axis
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(8);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + (w-margin.right) + ",0)")
    .call(yAxis);

// Y label
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "middle")
    .attr("dy", ".1em")
    .attr("transform", "translate(" + (w-(margin.right/2)) + ","+(hM/2)+"), rotate(90)")
    .text("FPKM");

// Legend header
svg.append("text")
    .attr("class", "legend")
    .attr("text-anchor", "left")
    .attr("y", 10)
    .attr("dy", ".2em")
    .attr("transform", "translate(10,10), rotate(0)")
    .text("<?= strtoupper($_REQUEST['gene_short_name']) ?> expression - <?= strtoupper($_REQUEST['library']) ?> vs compendium");

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