D3折線圖沒有正確的X和Y軸與標籤繪圖

在下面的折線圖中，雖然圖表正確繪製，但帶有標籤的x和y軸未被正確繪製。有人可以幫我解決這個問題嗎？D3折線圖沒有正確的X和Y軸與標籤繪圖

片段：

<html> 

<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <svg width="500" height="300"></svg> 

<script> 
//module declaration 
var app = angular.module('myApp',[]); 

//Controller declaration 
app.controller('myCtrl', function($scope){ 

    var data = [ 
      {x: "2016-01-10", y: "10.02"}, 
      {x: "2016-02-10", y: "15.02"}, 
      {x: "2016-03-10", y: "50.02"}, 
      {x: "2016-04-10", y: "40.02"}, 
      {x: "2016-05-10", y: "10.02"} 
     ]; 

    var parseTime = d3.timeParse("%Y-%m-%d"); 

    var xScale = d3.scaleTime().range([0,500]).domain(d3.extent(data, function(d){ return parseTime(d.x)})); 

    var yScale = d3.scaleLinear().range([300,0]).domain([0,50]); 


    //Plotting domain on x and y axis 
    var xAxis = d3.scaleBand().rangeRound([0, 500]).padding(0.6); 
    var yAxis = d3.scaleLinear().rangeRound([300, 0]); 
    xAxis.domain(data.map(function(d) { return d.letter; })); 
    yAxis.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

    //Final printing of elements on svg 

    //Plortting of x-axis 
    d3.select("svg") 
     .append("g") 
     .attr("transform", "translate(0," + 300 + ")") 
     .call(d3.axisBottom(xAxis)); 

    //Plotting of y-axis 
    d3.select("svg") 
     .append("g") 
     .call(d3.axisLeft(yAxis).ticks(10, "%")); 


     //the line function for path 
    var lineFunction = d3.line() 
     .x(function(d) {return xScale(parseTime(d.x)); }) 
     .y(function(d) { return yScale(d.y); }) 
     .curve(d3.curveLinear); 

    //Main svg container 
    var mySVG = d3.select("svg"); 

    //defining the lines 
    var path = mySVG.append("path"); 

    //plotting lines 
    path 
     .attr("d", lineFunction(data)) 
     .attr("stroke",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; }) 
     .attr("stroke-width", 2) 
     .attr("fill", "none"); 

}); 
</script> 

</body> 

</html>

結果：

問題：

X軸不來

標籤上的X軸缺失Y軸上

標貼丟失

請幫我出去找圖表正確。

來源

2016-11-23 Deadpool

關於y軸：你不是從原點位置翻譯它。它應該是：

d3.select("svg") 
    .append("g") 
    .attr("transform", "translate(30, 0)")//30 here is just an example 
    .call(d3.axisLeft(yAxis).ticks(10, "%"));

關於x軸：您將它一直翻譯到高度。它應該小於：

d3.select("svg") 
    .append("g") 
    .attr("transform", "translate(0," + (height - 30) + ")")//30 is just an example 
    .call(d3.axisBottom(xAxis));

簡而言之：正確設置邊距並根據這些邊距平移軸。

PS：沒有東西會顯示在蜱中，因爲您的數據中沒有letter或frequency。

來源

2016-11-23 06:28:46

嗨，謝謝;兩者都有效，但我沒有得到日期和頻率值的標籤。 – Deadpool

'console.log'你的域名，並檢查它們是否正確。我會告訴你：他們不是。數據上沒有「字母」或「頻率」。 –

D3折線圖沒有正確的X和Y軸與標籤繪圖

回答

相關問題