d3 ekseni etiketi, krom ve firefox'ta kesilmiş

Question

d3'te bir dağılım grafiği oluşturdum. Sorun şu ki, y ekseni etiketi firefox ve chrome'da görünmüyor (IE'de iyi çalışıyor). Svg genişliğini% 100 yapmak gibi şeyler yapmayı denedim, ancak bir nedenden dolayı etiket her zaman kesiliyor.

<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); 

Herhangi bir fikir çok takdir edilecektir. Teşekkürler

Answer 1

Metniniz için negatif koordinatlar kullanıyorsunuz, bu da SVG'nin dışına çekildikleri anlamına geliyor. Diğer tarayıcılar, IE9 doesn't seem to clip thing to the SVG area gibi görünüyor. En iyi çözüm, metninizin SVG içine çekilebilmesi için grafiğinize yeterli dolgu eklemektir. Kırpmanın devre dışı bırakılması does not seem to be supported in all browsers.

Answer 2

Teşekkür Ocak - ek yardımıyla:

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

bu çalıştı:

  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);