在d3.js中未定義填充

我試圖在Y軸上的0至24小時的時間段內獲取月份的日期（即1,2,3,4 ...等）軸。我無法得到軸線我不知道爲什麼。可以有人告訴我爲什麼？在控制檯窗口中，它表示填充未定義。在d3.js中未定義填充

<!DOCTYPE html> 
    <meta charset="utf-8"> 
    <style> 

    /*set the axis line color, dot stroke, font size, and font position*/ 
    body { 
     font: 13px helvetica; 
    } 

    .name{ 
     position: relative; 
     top: 90px; 
     text-align: left; 
     font-weight: bold; 
    } 

    .title { 
     position: relative; 
     text-align: left; 
     font-size: 25px; 
    } 

    .axis path, 
    .axis line { 
     fill: none; 
     stroke: #000; 
     shape-rendering: crispEdges; 
    } 

    .dot { 
     stroke: #000; 
    } 

    #filter { 
     position: absolute; 
    } 

    #mark { 
     padding-left: 150px; 
     position: inherit; 
    } 

    #xAXs { 
     position: relative; 
     left: 290px; 
     bottom: 30px; 
    } 

    #yAXs { 
    position: relative; 
    bottom: 30px; 
    left: 315px; 

    } 

    #label { 
    position: absolute; 
    top: 599px; 
    bottom: 125px; 
    left: 300px; 
    right: 0px; 
    } 

    #label2 { 
    position: absolute; 
    top: 599px; 
    bottom: 125px; 
    left: 430px; 
    right: 0px; 
    } 

    </style> 

    <body> 


    <script src="http://d3js.org/d3.v3.min.js"></script> 

    <script> 

    var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 


    var x = d3.scale.linear() 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .range([height, 0]); 


    var color = d3.scale.category10(); 

    var axisNames = { 
         Hour: 'Hour', 
         Day: 'Day', 
        }; 





    // define the x scale (horizontal) 
    var mindate = new Date(2012,0,1), 
     maxdate = new Date(2012,0,31); 

    var xScale = d3.time.scale() 
       .domain([mindate, maxdate]) // values between for month of january 
      .range([padding, width - padding * 2]); // map these the the chart width = total width minus padding at both sides  

    var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    d3.csv("file1.csv", function(error, data) { 
     data.forEach(function(d) { 
     d.Day = +d.Day; 
     d.Hour = +d.Hour; 
     }); 

     x.domain(d3.extent(data, function(d) { return d.Day; })).nice(); 
     y.domain(d3.extent(data, function(d) { return d.Hour; })).nice(); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
     .append("text") 
      .attr("class", "label") 
      .attr("x", width) 
      .attr("y", -6) 
      .style("text-anchor", "end") 
      .text("Day"); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("class", "label") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Hour") 

    var circles = svg.selectAll(".dot") 
      .data(data) 
     .enter().append("circle") 
      .attr("class", "dot") 
      .attr("r", 3.5) 
      .attr("cx", function(d) { return x(d.Hour); }) 
      .attr("cy", function(d) { return y(d.day); }) 
      .style("fill", function(d) { return color(d.name); }); 


     var legend = svg.selectAll(".legend") 
      .data(color.domain()) 
      .enter().append("g") 
      .attr("class", "legend") 
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 


     legend.append("rect") 
      .attr("x", width - 18) 
      .attr("width", 18) 
      .attr("height", 18) 
      .style("fill", color); 


     legend.append("text") 
      .attr("x", width - 24) 
      .attr("y", 9) 
      .attr("dy", ".35em") 
      .style("text-anchor", "end") 
      .text(function(d) { return d; }); 



     d3.selectAll("[name=v]").on("change", function() { 
      var selected = this.value; 
      display = this.checked ? "inline" : "none"; 


     svg.selectAll(".dot") 
      .filter(function(d) {return selected == d.name;}) 
      .attr("display", display); 
      }); 



     d3.selectAll("[name=sepal]").on("change", function(d) { 
     radius = this.value; 

     svg.selectAll(".dot") 
     console.log(radius); 
     circles.attr("r", function(d) { return d[radius]; }); 
     }); 



     d3.select("[name=xAX]").on("change", function(){ 
     xAxy = this.value; 
     console.log(xAxy) 
     x.domain(d3.extent(data, function(d) { return d[xAxy]; })).nice(); 

     svg.select(".x.axis").transition().call(xAxis); 

     svg.selectAll(".dot").transition().attr("cx", function(d) { 
      return x(d[xAxy]); 
     }); 
     svg.selectAll(".x.axis").selectAll("text.label").text(axisNames[xAxy] + " (cm)"); 
     }); 

     d3.select("[name=yAX]").on("change", function(){ 
     yAxy = this.value; 
     console.log(yAxy) 
     y.domain(d3.extent(data, function(d) { return d[yAxy]; })).nice(); 
     svg.select(".y.axis").transition().call(yAxis); 
     svg.selectAll(".dot").transition().attr("cy", function(d) { 
      return y(d[yAxy]); 
     }); 
     svg.selectAll(".y.axis").selectAll("text.label").text(axisNames[yAxy] + " (cm)"); 
     }); 

    }); 

    </script> 
    <br><br> 
     <br> 
    </body>

來源

2016-12-28 Akhil Kodicherla

嗯，這是因爲'padding'沒有定義！ –

你能幫我嗎？填充在CSS中是默認的嗎？ –

您可以設置其中的範圍內使用padding和width時間尺度：

var xScale = d3.time.scale() 
    .domain([mindate, maxdate]) 
    .range([padding, width - padding * 2]);

儘管您以前定義width：

width = 960 - margin.left - margin.right;

你沒有定義padding在任何地方你的代碼。

所以，只要給它任何你想要的值，之前定義的時間刻度：

var padding = 42; //tweak this value

來源

2016-12-28 14:00:10

在d3.js中未定義填充

回答

相關問題