軸がbarchartに表示されない

私はちょうどD3とJSを開始しており、私はbarchartにX軸を追加しようとしています。現れません。これは私のコードの一番下にあるsvg.append("g")が間違っているからです（変数gはありません）。代わりにそこには何があるべきですか？軸がbarchartに表示されない

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

.scale（x）の中のxは何ですか？ –

d3.v3を使用していますか？もしそうなら、なぜv4を使用しないのですか？また、ドメインや範囲は表示されません。 –

それはSVGの外にあるように、それは見ることができないので、x軸が高さYに変換されます。

高さと幅を固定しました。テキストに白の色を付けました。

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

公平でジェラルドの答えが良いと思います。彼は謝辞も出していない。彼はどんなd3問題のためのgoto人です。あなたが彼と間違った足で降りると、物事はあなたのためにはるかに困難になります。 –

"G" はSVGのグループ（<g>）要素の、変数ではありません。 SVGの高さがある

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

height場合は、SVGの最後に軸を翻訳しているので、何も表示されません：

ここでの問題は、この行のようです。

溶液、従って、より低い値に変換される：

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

出典

2017-09-28 22:12:00

軸がbarchartに表示されない

答えて

関連する問題