Javascript 轴不'；不出现在柱状图上

我刚刚开始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);

“g”不是一个变量，它是SVG中的group（

）元素

这里的问题似乎是这样的：

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

如果

height

是SVG的高度，则不会显示任何内容，因为您正在将轴平移到SVG的末尾

因此，解决方案是将其转换为小于以下值的值：

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

---

xAxis在y方向被转换为高度，因此它在svg之外时无法被看到

我固定了高度和宽度。给文本一种白色

在x轴上你想要什么

var宽度=600；
var高度=600；
//创建要可视化的值的数据数组
VarDataArray=[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]）；
//为SVG创建变量
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“高度”，600）
.attr（“宽度”，600）；
//选择、附加到SVG，并将属性添加到条形图的矩形中
svg.selectAll（“rect”）
.数据（数据阵列）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“高度”，函数（d，i）{
申报表（d*10）
})
.attr（“宽度”、“40”）
.attr（“x”，函数（d，i）{
返回（i*60）+25
})
.attr（“y”，函数（d，i）{
返回400-（d*10）
});
//选择、附加到SVG并向文本添加属性
svg.selectAll（“文本”）
.数据（数据阵列）
.enter（）.append（“文本”）
.文本（功能（d）{
返回d
})
.attr（“类”、“文本”）
.attr（“x”，函数（d，i）{
返回（i*60）+36
})
.attr（“y”，函数（d，i）{
返回415-（d*10）
})
.样式（“填充”、“白色”）；
//添加轴
var xAxis=d3.svg.axis（）
.scale（xScale）
.东方（“底部”）；
//var yAxis=d3.svg.axis（）.scale（y）
//.方向（“左”）。勾号（5）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“转换（0420）”）
.呼叫（xAxis）；

什么是x英寸刻度（x）？您使用的是d3.v3吗？如果是这样，为什么不使用v4？此外，我没有看到任何领域或范围。公平地说，我认为杰拉尔多的答案更好。他甚至都没有得到确认。他是任何d3问题的接班人。如果你和他走错了路，事情对你来说会困难得多。