javascript - D3 - yAxis 刻度未显示-6ren

javascript - D3 - yAxis 刻度未显示

转载作者：行者123 更新时间：2023-11-30 15:41:24

30

4

我正在做 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>

有趣的事实:当我使用 axisBottom 而不是 axisLeft 附加轴时，我可以看到带有刻度的轴(显然方向不正确)。提前感谢您的帮助!

最佳答案

这里的问题是轴生成器创建了一个轴，调用时(使用 call)，绘制在 0,0 位置:

Regardless of orientation, axes are always rendered at the origin.

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

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

这是演示:

<style>

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

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

.x.axis path {
  display: none;
}

.chart rect {
  fill: steelblue;
}

.barText {
  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 = 500, height = 300
var barWidth = width / data.length

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

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

var groups = chart.selectAll(".bar")
    .data(data)
  .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("class", "barText")
  .attr('x', barWidth / 2)
	.attr('y', d=> yScale(d) + 16)
  .attr('height', (d) => height - 10 - yScale(d))
  .attr('width', barWidth - 1)
  .text(d => d)
	
	chart.append("g")
  .attr("class", "y axis")
	.attr("transform", "translate(30,0)")
  .call(d3.axisLeft(yScale));

</script>

PS:你的代码还有一些问题，你可以改进(在这里，我只是回答你的问题):

您的代码缺少所有填充(左、右、上、下)；
你应该使用一个标尺来定位x轴
您不需要计算条形宽度，bandwidth() 会自动计算。
模板文字不适用于 IE

关于javascript - D3 - yAxis 刻度未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40753501/

30

4

0

文章推荐： javascript - 聊天框滚动到底部

文章推荐： javascript - Angular2 $http promise 与 Promise.all()

文章推荐： c - 访问函数中的数组时发生访问冲突(函数内部)

文章推荐： Javascript - fill() 正在使用错误的颜色进行填充

matplotlib:左 yaxis 和右 yaxis 具有不同的单位
我正在绘制开尔文曲线。我想让左边的 yaxis 以开尔文显示单位，右边的 yaxis 以摄氏度显示单位，并且都四舍五入到最接近的整数(所以刻度不对齐，因为 TempK=TempC+273.15) f
javascript - 使用两个不同的 yAxis 比例 Highcharts 定义 yAxis 值
您好，我有一个 Highcharts 图表，它是一个具有两个不同 y 轴的折线图。左边一张图形%，右边一分钟。我想将左侧“硬编码”为“0%、20%、40%、60%、80%、100%” 这是我的代码
Highcharts yaxis 标签格式
有什么方法可以将 yaxis 格式化为我想要的格式。事实上，有时在 yaxis 上，数据在右侧显示为 (k) 而不是千。我想删除(k)。我该怎么做？我想要的 yaxis 图像: 最佳答案您可以
Highcharts yAxis 未缩放以填充可用高度
我在处理图表时遇到问题，其中图表的高度未缩放以填充该区域。图表对象本身正确缩放到容器 div 中，是 yAxis 本身卡在收缩状态。我相信这与使用较小的数字有关，但我不是 100% 确定任何指导将不
javascript - yAxis 仅用一个系列计算
我正在使用 Highstock 绘制图表。它显示许多系列，yAxis 是自动计算的，以显示添加到图表中的每个系列。但是我的一个系列比其他系列更重要。所以我想知道是否可以只根据一个系列来计算我的 y
css - yAxis 没有出现
在下面的代码中，我创建并调用 x 和 y 轴 d3 元素作为 svg 组: var svg = d3.select("#right-section").append("svg").attr("widt
python - 如何在不从下到上对值进行排序的情况下更改绘图轴 (yaxis)
我写下了一段代码，用于根据包含 40 行和 5 列的数据集绘制命中图。数据是从下到上绘制的。如何更改它以便我的数据绘图从上到下开始？我使用了 plt.invert_yaxis() 但它显示错误:
javascript - yAxis 数据在右侧定位时溢出到图表上
我希望 yAxis 标签不要溢出，也不要覆盖在绘制的图表之上。正如您从示例中看到的那样，它们执行以下操作: Highcharts.chart('container', { chart: {
python - 如何移除如图所示的 Altair yaxis？
如何去除蓝色部分？ import altair as alt from vega_datasets import data iris = data.iris() alt.Chart(iris).mar
javascript - Highcharts yaxis 价格线
我正在尝试在 Highcharts 中设置显示当前 y 轴值并将其突出显示的功能。下面是一个示例，在这个图表(即 Highcharts)中，您将看到水平黑线，其中带有黑色标签选择的当前值。关于如何
javascript - 导出时更新的 yAxis 标题丢失
我们的图表包含多个系列。我们一次只允许一个系列在图表中可见。当图表首次加载时，我们将 yAxis 的标题设置为 series[0].name: chart { ... events: { lo
jqplot - 隐藏第一个 yaxis 标签
我需要在yaxis中隐藏标签-200，请问有什么方法可以隐藏第一个yaxis标签吗？所以yaxis标签结果会是[empty] ,0, 200, 400, 600, 800 最佳答案我所做的是为负值返
jqplot - 隐藏第一个 yaxis 标签
我需要在yaxis中隐藏标签-200，请问有什么方法可以隐藏第一个yaxis标签吗？所以yaxis标签结果会是[empty] ,0, 200, 400, 600, 800 最佳答案我所做的是为负值返
javascript - 用于在右侧显示 yAxis 值的额外工具提示
我想要在我的 Highcharts 中有一个额外的工具提示，它将显示 yAxis 值。我正在谈论的这些工具提示您已经在许多 ohlc 图表中看到过。为了演示目的，我使用绘画工具制作了它。如果您在右侧
javascript - d3 热图列标题作为 yaxis
我有这样一个数据集: CT, CA, GA, TX, Year, Month 1, 1, 2, 4, 2016, 03 2, 1, 3, 5, 2016, 03 状态列下的数字对应于出现的次数。然后我
javascript - 如何在条形图中强制显示 yAxis 上的每个标签
我对 Highcharts 有疑问。我想显示每个 yAxis 标签，但默认情况下 Highcharts 隐藏我一半的标签。图形的高度是固定的，类别的数量是可变的，因此增加高度不是解决方案。我有一
javascript - D3 - yAxis 刻度未显示
我正在做 D3 的基本条形图教程，但 yAxis 的刻度线没有显示，即使线显示了。这个问题被问了很多，但我仍然没有找到适合我具体情况的答案。这是我的代码: .axis text { font
javascript - 水平条形图在 yAxis 中垂直对齐长文本
jsfiddle 我正在使用 d3 绘制水平条形图，但在垂直对齐 y 轴上的文本时遇到问题。这是导致问题的代码: .attr('transform', function(d) { var n
javascript - Highcharts 如何在同一行上对齐两个图表 yAxis
如何在同一行上对齐两个 Highcharts yAxis？我在同一页上有两个图表，一个在另一个下面。在 highcharts 中有没有办法指定两个图表的 yAxis 从同一行开始？实际: 预期提
javascript - HighCharts yAxis 大数字周围的空间太大
My current chart 刚开始使用 HighCharts。我绘制的股票价格在一天内在 1,598 美元和 1,601 美元左右波动。变化显然都很小——但价格在变化——它不应该是一条直线。 H

首页

博学

6Ren·AI

商城

javascript - D3 - yAxis 刻度未显示