ярлык оси d3 отрезан в chrome и firefox

Я создал точечную диаграмму в d3. Проблема в том, что метка оси y не отображается в firefox и chrome (отлично работает в IE). Я пробовал делать такие вещи, как сделать ширину svg 100%, но по какой-то причине этикетка всегда обрезается.

<div id="TimeSeriesChartDiv" style="display: inline; float: right; width: 650px;
                            height: 415px">
                        </div>

 //Width and height
        var w = 600;
        var h = 300;
        var padding = 30;
        var margin = { top: 20, right: 20, bottom: 30, left: 20 };
        var df = d3.time.format("%b-%y");


        //Create scale functions
        var xScale = d3.time.scale()
                            .domain([d3.min(dataset, function (d) { return d[0]; }), d3.max(dataset, function (d) { return d[0]; })])
                            .range([padding, w - padding * 2])
                            .nice(5);

        var yScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function (d) { return d[1]; })])
                             .range([h - padding, padding]);
 //Define X axis
        var xAxis = d3.svg.axis()
                          .scale(xScale)
                          .orient("bottom")
                          .ticks(5)
                          .tickFormat(df);

        //Define Y axis
        var yAxis = d3.svg.axis()
                          .scale(yScale)
                          .orient("left")
                          .ticks(5);

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

//Create X axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(20," + (h - padding) + ")")
            .call(xAxis);

        //Create Y axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + 50 + ",0)")
            .call(yAxis);

        svg.append("text")
        .attr("class", "axislabel")
         .attr("text-anchor", "end")
         .attr("x", w / 2)
         .attr("y", h + 8)
         .text("Date");

        svg.append("text")//-->>this is the text that gets cut off
        .attr("class", "axislabel")
        .attr("text-anchor", "end")
        .attr("x", -100)
        .attr("y", -15)
        //.attr("dy", ".75em")
        .attr("transform", "rotate(-90)")
        .text(unit);

Любые идеи будут высоко оценены. Спасибо

2 5
svg d3.js

2 ответа:

Вы используете отрицательные координаты для вашего текста, что означает, что они рисуются вне SVG. Похоже, что IE9 не обрезает что-то в область SVG, как это делают другие браузеры. Лучшее решение-добавить достаточное количество отступов на график, чтобы текст можно было нарисовать внутри SVG. Отключение отсечения , по-видимому, не поддерживается во всех браузерах.

4

Спасибо Ян -- с дополнительной помощью от:

Http://www.d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html

Это сработало: 

         svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("class", "axislabel")
        .attr("text-anchor", "middle")
        .attr("x", 0 - (h / 2))
        .attr("y",0)//any negative value here wouldnt display in ff or chrome
        .attr("dy", "1em")
        .text(unit);
0