軸不會出現在條形圖上

我剛剛開始D3和JS，我正嘗試將X軸添加到條形圖中。它沒有出現。我認爲這是因爲我的代碼底部的svg.append("g")不正確（沒有變量g）。相反應該有什麼變化？軸不會出現在條形圖上

barchart.js

// Create data array of values to visualize 
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30]; 

// Create variable for the SVG 
var svg = d3.select("body").append("svg") 
      .attr("height","100%") 
      .attr("width","100%"); 

// Select, append to SVG, and add attributes to rectangles for bar chart 
svg.selectAll("rect") 
    .data(dataArray) 
    .enter().append("rect") 
      .attr("class", "bar") 
      .attr("height", function(d, i) {return (d * 10)}) 
      .attr("width","40") 
      .attr("x", function(d, i) {return (i * 60) + 25}) 
      .attr("y", function(d, i) {return 400 - (d * 10)}); 

// Select, append to SVG, and add attributes to text 
svg.selectAll("text") 
    .data(dataArray) 
    .enter().append("text") 
    .text(function(d) {return d}) 
      .attr("class", "text") 
      .attr("x", function(d, i) {return (i * 60) + 36}) 
      .attr("y", function(d, i) {return 415 - (d * 10)}); 

//add axis 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 
svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis);

來源

2017-09-28 Rilcon42

什麼是X在.scale（x）的？ –

你使用d3.v3嗎？如果是這樣，爲什麼不使用v4？另外我沒有看到任何域或範圍。 –

x軸平移在y到高度，因此它不能被看作是它是SVG外部。

我固定了高度和寬度。給文本一個白色的顏色。

你想在X軸上做什麼？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 

 
<body> 
 

 
</body> 
 
<script> 
 
    var width = 600; 
 
    var height = 600; 
 
    // Create data array of values to visualize 
 
    var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30]; 
 

 
    var xScale = d3.scale.linear().range([0, width]); 
 
    // var yScale = d3.scale.linear().range([height, 0]); 
 

 
    // Create variable for the SVG 
 
    var svg = d3.select("body").append("svg") 
 
    .attr("height", 600) 
 
    .attr("width", 600); 
 

 
    // Select, append to SVG, and add attributes to rectangles for bar chart 
 
    svg.selectAll("rect") 
 
    .data(dataArray) 
 
    .enter().append("rect") 
 
    .attr("class", "bar") 
 
    .attr("height", function(d, i) { 
 
     return (d * 10) 
 
    }) 
 
    .attr("width", "40") 
 
    .attr("x", function(d, i) { 
 
     return (i * 60) + 25 
 
    }) 
 
    .attr("y", function(d, i) { 
 
     return 400 - (d * 10) 
 
    }); 
 

 
    // Select, append to SVG, and add attributes to text 
 
    svg.selectAll("text") 
 
    .data(dataArray) 
 
    .enter().append("text") 
 
    .text(function(d) { 
 
     return d 
 
    }) 
 
    .attr("class", "text") 
 
    .attr("x", function(d, i) { 
 
     return (i * 60) + 36 
 
    }) 
 
    .attr("y", function(d, i) { 
 
     return 415 - (d * 10) 
 
    }) 
 
    .style("fill", "white"); 
 

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

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

 
    svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0, 420)") 
 
    .call(xAxis); 
 
</script> 
 

 
</html>

來源

2017-09-28 22:37:18

公平我認爲Gerardo的答案更好。他甚至沒有得到確認。他是任何D3問題的轉折人。如果你跟他走錯了路，事情對你來說會更加困難。 –

「G」是不是一個變量，它在SVG基團（<g>）元素。

這裏的問題似乎是這一行：

.attr("transform", "translate(0," + height + ")")

如果height是SVG的高度，什麼都不會顯示出來，因爲你要翻譯這根軸對SVG的結束。

的溶液，因此，被其轉換成小於一個值：

.attr("transform", "translate(0," + (height - padding) + ")")

來源

2017-09-28 22:12:00

軸不會出現在條形圖上

回答

相關問題