D3.js 尝试添加x轴和y轴D3

我试图在下图中添加一个x轴和y轴，但它没有显示出来。我尝试添加.attr（“transform”，“translate（0，+height+”），但当我添加时，轴线消失了

以下是bl.ocks.org上的完整代码

添加轴的D3代码：

        var x = d3.scale.linear().range([0, w]);
            var y = d3.scale.linear().range([h, 0]);

            var xAxis = d3.svg.axis().scale(x)
                .orient("bottom").ticks(5);

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

            svg.append("g")
                .attr("class", "x axis")
                .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);

---

您应该指定页边距。y轴未显示，因为它在svg之外（请检查gif）：

您应该指定边距，并按以下方式绘制svg：

var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 50
};
var w = 400 - margin.left - margin.right;
var h = 325 - margin.top - margin.bottom;

...
  // Create svg elementFromPoint
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

此外，还应移动图表底部的x轴：

  svg.append("g")
    .attr("class", "x axis")
    .attr('transform', 'translate(0,' + h + ')')
    .call(xAxis);

检查固定示例

var myData=[21,2,5,21,15]；
//宽度和高度
var yScale=null；
var保证金={
前20名，
右:20,，
底数：30，
左：50
};
var w=400-margin.left-margin.right；
var h=325-margin.top-margin.bottom；
函数绘图（初始数据）{
var xScale=d3.scale.ordinal（）
.domain（d3.范围（initialData.长度））
.范围圆带（[0，w]，0.05）；
yScale=d3.scale.linear（）
.domain（[0，d3.max（初始数据）]）
.范围（[0，h]）；
//从点创建svg元素
var svg=d3。选择（“图表”）
.append（“svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.selectAll（“rect”）
.数据（初始数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回xScale（i）；
})
.attr（“y”，函数（d）{
返回h-yScale（d）；
})
.attr（“宽度”，xScale.rangeBand（））
.attr（“高度”，功能（d）{
返回yScale（d）；
})
.attr（“填充”、“钢蓝”）；
svg.selectAll（“文本”）
.数据（初始数据）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d；
})
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d，i）{
返回xScale（i）+xScale.rangeBand（）/2；
})
.attr（“y”，函数（d）{
返回h-yScale（d）+14；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“白色”）；
//这里尝试添加x和y轴
var x=d3.scale.linear（）.范围（[0，w]）；
变量y=d3.scale.linear（）.range（[h，0]）；
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（'transform'，'translate（0'，+h+'））
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
}
绘制（myData）；
//更新功能
函数更新（newData）{
yScale.domain（[0，d3.max（newData）]）；
var rects=d3。选择（“图表svg”）
.selectAll（“rect”）
.数据（新数据）；
//输入所选内容
直肠
.enter（）.append（“rect”）；
//更新选择
直肠
.transition（）
.持续时间（300）
.attr（“y”，函数（d）{
返回h-yScale（d）；
})
.attr（“高度”，功能（d）{
返回yScale（d）；
})
//退出选择
直肠
.exit（）.remove（）；
var text=d3。选择（“图表svg”）
.selectAll（“文本”）
.数据（新数据）；
//输入所选内容
文本
.enter（）.append（“rect”）；
//更新选择
文本
.transition（）
.持续时间（300）
.attr（“y”，函数（d）{
返回h-yScale（d）+14；
})
.文本（功能（d）{
返回d；
})
//退出选择
文本
.exit（）.remove（）；
}
var newData=[10,13,5,9,11]；
d3.选择（“#更新”）。在（“单击”，函数（）上{
更新（新数据）；
});
正文{
字体：12px Arial；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}

更新
您必须翻译低于
高度的组
。