爲什麼我的可重用d3.js圖表​​不顯示圖表？

Question

圖表顯示爲空白圖表;我知道它在那裏，因爲當我生成圖表時，頁面調整爲適合圖表。不同之處在於沒有軸或圖表數據。

我想實現一個可重用的d3.js圖表​​，但我無法讓它工作;這裏是可重複使用的海圖編：

function chart() { 
    var margin = {top: 50, right: 20, bottom: 50, left: 75}; 
    var width = 400 - margin.left - margin.right; 
    var height = 200 - margin.top - margin.bottom; 

    var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; 

    var xScale = d3.time.scale();  // time series 
    var yScale = d3.scale.linear(); // our float/int data points 
    var xAxis = d3.svg.axis(); 
    var yAxis = d3.svg.axis(); 
    var vline = d3.svg.line();  // our data will use this line 
    var varea = d3.svg.area();  // our data will fill this area 

    function my(selection) { 
     selection.each(function(data) { 
      xScale 
       .domain(d3.extent(data, function(d) { return parseDate(d.x); })) 
       .range([0, width]); 

      yScale 
       .domain([0, d3.max(data, function(d) { return d.y; })]) 
       .range([height,0]); 

      xAxis 
       .scale(xScale) 
       .orient("bottom") 
       .ticks(12) 
       .innerTickSize(-height) 
       .outerTickSize(-height) 
       .tickPadding(3); 

      yAxis 
       .scale(yScale) 
       .orient("left") 
       .ticks(6) 
       .innerTickSize(-width) 
       .outerTickSize(-width) 
       .tickPadding(3) 
       .tickFormat(d3.format(",d")); 

      vline 
       .x(function(d) { return xScale(parseDate(d.x)); }) 
       .y(function(d) { return yScale(d.y); }); 

      varea 
       .x(function(d) { return xScale(parseDate(d.x)); }) 
       .y0(height) 
       .y1(function(d) { return yScale(d.y); }); 

      // add SVG 
      var svg = d3.select(this).selectAll("svg").data([data]); 

      // make chart if it doesnt exist 
      var gEnter = svg.enter().append("svg").append("g"); 
      gEnter.append("g").attr("class", "x axis"); 
      gEnter.append("g").attr("class", "y axis"); 
      gEnter.append("g").attr("path", "line"); 
      gEnter.append("g").attr("path", "area"); 

      svg 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom); 

      var g = svg.select("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      g.select(".x.axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis) 
       .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("transform", function(d) { 
        return "rotate(-65)"; 
       }); 

      g.select(".y.axis") 
       .call(yAxis); 

      g.select(".line") 
       .attr("d", vline(data)); 

      // draw area 
      g.select(".area") 
       .attr("d", varea(data)); 
     }); 
    } 

    return my; 
} 

我打電話圖表所示：

myData = [ 
    { 'x': "2015-11-19 17:37:31", 'y': 0 }, 
    ... 
]; 

var c = chart(); 
d3.select("#blah").data(myData).call(c); 

的jsfiddle：https://jsfiddle.net/auvdn4gh/5/

固定一個：https://jsfiddle.net/auvdn4gh/11/

Answer 1

的幾個原因。

在您所提供的的jsfiddle，沒有與類.service沒有HTML標籤，所以當你計算出寬度，它不知道你在引用什麼。因此寬度計算爲0 - 20 - 75 = - 95。具有負寬度的圖表不會顯示出來。

所以我第一次固定，通過只設置width = 400 - margin.left - margin.right

2.在你xAxis和yAxis，你給蜱蟲

.innerTickSize(-height) 
    .outerTickSize(-height) 

和

.innerTickSize(-width) 
    .outerTickSize(-width) 

如此巨大價值你會在整個圖表上畫出蜱，並將它全部塗黑。所以我刪除了這些。現在

您的圖表顯示出來：JSFiddle