为什么我的可重用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