Javascript D3-yAxis蜱虫没有出现_Javascript_D3.js

Javascript D3-yAxis蜱虫没有出现

javascript d3.js

Javascript D3-yAxis蜱虫没有出现,javascript,d3.js,Javascript,D3.js,我正在做D3的基本条形图教程，但是yAxis的刻度没有显示，即使线条显示了。这个问题被问了很多，但我仍然没有找到一个适合我具体情况的答案。这是我的密码： <!DOCTYPE html> <meta charset="utf-8"> <style> .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000000; } .x.ax

我正在做D3的基本条形图教程，但是yAxis的刻度没有显示，即使线条显示了。这个问题被问了很多，但我仍然没有找到一个适合我具体情况的答案。这是我的密码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000000;
}

.x.axis path {
  display: none;
}

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>

<svg class="chart"></svg>

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>

<script>

var data = [4, 8, 15, 16, 23, 42];
var width = 960, height = 500
var barWidth = width / data.length

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d)])
  .range([height, 0])

var chart = d3.select(".chart")
  .attr('width', width)
  .attr('height', height)

chart.append("g")
  .attr("class", "y axis")
  .call(d3.axisLeft(yScale));

var groups = chart.selectAll(".bar")
    .data(data)
  .enter().append("g")
    .attr('transform', (d, i) => `translate(${i * barWidth}, 0)`)

groups.append('rect')
  .attr('y', (d) => yScale(d))
  .attr('height', (d) => height - yScale(d))
  .attr('width', barWidth - 1)

groups.append('text')
  .attr('x', barWidth / 2)
  .attr('height', (d) => height - yScale(d))
  .attr('width', barWidth - 1)
  .text(d => d)

</script>


.轴文本{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000000；
}
.x轴路径{
显示：无；
}
.chart rect{
填充：钢蓝；
}
.图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
var数据=[4,8,15,16,23,42]；
变量宽度=960，高度=500
var barWidth=width/data.length
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d）]）
.范围（[高度，0]）
var图表=d3。选择（“图表”）
.attr（'width'，width）
.attr（'height'，height）
图表.附加（“g”）
.attr（“类”、“y轴”）
.call（d3.axisLeft（yScale））；
变量组=图表。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（'transform'，（d，i）=>`translate（${i*barWidth}，0）`）
groups.append（'rect'）
.attr（'y'，（d）=>yScale（d））
.attr（'高度'，（d）=>高度-yScale（d））
.attr（'width'，barWidth-1）
groups.append（'text'）
.attr（'x'，条宽/2）
.attr（'高度'，（d）=>高度-yScale（d））
.attr（'width'，barWidth-1）
.text（d=>d）

有趣的事实：当我使用axisBottom而不是axisLeft附加轴时，我可以看到带有刻度的轴（显然方向不正确）。提前谢谢你的帮助

我不是专家，但我想我知道了。您没有为您的.text（）指定适当的x，y。。。我修改了适合我的代码。。。请参阅JS小提琴：

代码如下：

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000000;
}

.x.axis path {
  display: none;
}

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>

<svg class="chart"></svg>

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>

<script>

var data = [4, 8, 15, 16, 23, 42];
var width = 960, height = 500
var barWidth = width / data.length

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d)])
  .range([height, 0])

var chart = d3.select(".chart")
  .attr('width', width)
  .attr('height', height)

chart.append("g")
  .attr("class", "y axis")
  .call(d3.axisLeft(yScale));

var groups = chart.selectAll(".bar")
    .data(data)
  .enter().append("g")
    .attr('transform', (d, i) => `translate(${i * barWidth}, 0)`)

groups.append('rect')
  .attr('y', (d) => yScale(d))
  .attr('height', (d) => height - yScale(d))
  .attr('width', barWidth - 1)

groups.append('text')
  .attr('y', (d) => yScale(d) + 20)
  .attr('x', barWidth / 2)
  .attr('height', (d) => height - yScale(d))
  .attr('width', barWidth - 1)
  .text(d => d)

</script>


.轴文本{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000000；
}
.x轴路径{
显示：无；
}
.chart rect{
填充：钢蓝；
}
.图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
var数据=[4,8,15,16,23,42]；
变量宽度=960，高度=500
var barWidth=width/data.length
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d）]）
.范围（[高度，0]）
var图表=d3。选择（“图表”）
.attr（'width'，width）
.attr（'height'，height）
图表.附加（“g”）
.attr（“类”、“y轴”）
.call（d3.axisLeft（yScale））；
变量组=图表。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（'transform'，（d，i）=>`translate（${i*barWidth}，0）`）
groups.append（'rect'）
.attr（'y'，（d）=>yScale（d））
.attr（'高度'，（d）=>高度-yScale（d））
.attr（'width'，barWidth-1）
groups.append（'text'）
.attr（'y'，（d）=>yScale（d）+20）
.attr（'x'，条宽/2）
.attr（'高度'，（d）=>高度-yScale（d））
.attr（'width'，barWidth-1）
.text（d=>d）

这里的问题是轴生成器创建了一个轴，当调用该轴时（使用

call

），该轴被绘制在

0,0

位置：

无论方向如何，轴始终在原点处渲染

因此，您需要平移轴，将其向右移动一点：

chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(30,0)")//magic number, change it at will
    .call(d3.axisLeft(yScale));

以下是演示：


.轴文本{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000000；
}
.x轴路径{
显示：无；
}
.chart rect{
填充：钢蓝；
}
barText先生{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
var数据=[4,8,15,16,23,42]；
变量宽度=500，高度=300
var barWidth=width/data.length
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d）]）
.范围（[高度-10,0]）
var图表=d3。选择（“图表”）
.attr（'width'，width）
.attr（'height'，height）
变量组=图表。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（'transform'，（d，i）=>`translate（${i*barWidth+30}，0）`）
groups.append（'rect'）
.attr（'y'，（d）=>yScale（d））
.attr（'height'，（d）=>height-10-yScale（d））
.attr（'width'，barWidth-1）
groups.append（'text'）
.attr（“类”、“barText”）
.attr（'x'，条宽/2）
.attr（'y'，d=>yScale（d）+16）
.attr（'height'，（d）=>height-10-yScale（d））
.attr（'width'，barWidth-1）
.text（d=>d）
图表.附加（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“翻译（30,0）”）
.call（d3.axisLeft（yScale））；

不确定您是否已经解决了它，但我已经采取了另一种方法

基于

添加一把小提琴，以便能够快速解决它

var data = [4, 8, 15, 16, 23, 42];

var svg = d3.select(".chart");
// we need to set a margin so that the yAxis has space to display
var margin = {top: 20, right: 20, bottom: 30, left: 40};
// these variables are assigned such that the margin is already deducted
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;

var padding = 5; //5 px padding between bars
var barWidth = width / data.length - padding;

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)]) // here we can just call d3.max(data) because data is an array
  .range([height, 0]);

var g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

g.append('g')
  .attr('class', 'axis axis--y')
  .call(d3.axisLeft(yScale).ticks(5));

g.selectAll('.bar')
  .data(data)
  .enter().append('rect')
  .attr('class', 'bar')
  .attr('x', function(d, i) { return (barWidth + padding) * i; })
  .attr('y', function(d) { return yScale(d); })
  .attr('width', barWidth)
  .attr('height', function(d) { return height - yScale(d); });