如何使用D3将堆叠条形图中的条形图设置为最小高度？
D3是一种用于创建动态、交互式数据可视化的JavaScript库。堆叠条形图是一种常见的数据可视化方式，用于比较多个类别的数据，并显示它们的总和。如果想将堆叠条形图中的条形图设置为最小高度，可以按照以下步骤进行操作：
- 导入D3库：在HTML文件中导入D3库的JavaScript文件，确保可以使用D3的功能。
<script src="https://d3js.org/d3.v7.min.js"></script>- 创建SVG容器：使用D3的选择器选择一个合适的DOM元素，并创建一个SVG容器来容纳堆叠条形图。
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);- 准备数据：准备需要显示的数据，并将其转换为适合堆叠条形图的格式。
const data = [
{ category: "A", value: 10 },
{ category: "B", value: 20 },
{ category: "C", value: 30 }
];
const stack = d3.stack()
.keys(["value"])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
const series = stack(data);- 创建堆叠条形图：使用D3的绘图函数创建堆叠条形图，并设置条形图的高度。
svg.selectAll("rect")
.data(series)
.enter()
.append("rect")
.attr("x", d => xScale(d.data.category))
.attr("y", d => yScale(d[1]))
.attr("width", barWidth)
.attr("height", d => yScale(d[0]) - yScale(d[1]))
.attr("fill", color);在上述代码中，yScale(d[0]) - yScale(d[1])表示条形图的高度，通过设置为最小高度，可以将所有条形图都设置为相同的高度。
- 添加轴线和标签：根据需要，可以添加x轴和y轴的刻度线和标签，以及图表的标题和图例等。
// 添加x轴
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// 添加y轴
svg.append("g")
.call(d3.axisLeft(yScale));
// 添加图表标题
svg.append("text")
.attr("x", width / 2)
.attr("y", margin.top / 2)
.attr("text-anchor", "middle")
.text("Stacked Bar Chart");
// 添加图例
const legend = svg.append("g")
.attr("transform", "translate(" + (width - margin.right) + "," + margin.top + ")");
legend.selectAll("rect")
.data(series)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", (d, i) => i * 20)
.attr("width", 10)
.attr("height", 10)
.attr("fill", color);
legend.selectAll("text")
.data(series)
.enter()
.append("text")
.attr("x", 20)
.attr("y", (d, i) => i * 20 + 10)
.text(d => d.key);以上是使用D3将堆叠条形图中的条形图设置为最小高度的基本步骤。根据具体需求，可以进一步调整样式、添加交互效果等。对于更详细的D3教程和示例，可以参考腾讯云的数据可视化产品D3.js介绍页面：D3.js介绍。
相关·内容
1回答
D3条形图中缺少Rect对象
javascript、d3.js、svg、bar-chart、data-visualization
我一直致力于创建一个简单的D3条形图可视化，但由于某种原因，条形图(rects)没有出现在我的视图中。可视化使用.csv作为可视化的原始数据。图表中我能得到的唯一部分是轴，但是即使在绘制轴时更改函数调用的顺序，它们也会消失。
我尝试过使用.selectAll("rect")函数调用以及.join("rect")和.append("rect")函数调用，但是似乎没有什么能奏效。我写的代码如下。我尝试过许多在线资源来确定为什么rect对象不会出现的原因。
我使用的是D3.jsAPI版本5。
<script>
var margin
浏览 2提问于2020-03-10得票数 1
回答已采纳
1回答
d3js:无法在轴内放置水平条
d3.js
我正在学习从零开始用d3制作图表，而不使用其他人的代码并修改它。我可以成功地创建一个x&y轴垂直条形图。但是当要把同一张图表转换成水平条形图时，我最终会陷入一片混乱。到目前为止，我的代码如下：
var data = [{
name: "China",
value: 1330141295
}, {
name: "India",
value: 1173108018
}, {
name: "Indonesia",
value: 242968342
}, {
name: "Russia",
valu
浏览 0提问于2018-10-18得票数 0
回答已采纳
1回答
D3.js中的标度误差/轴误差
svg、d3.js
我对D3很陌生，并且一直在用这些例子来修改我的代码，
下面是我的D3代码，它运行良好，除非条形图没有缩放，我似乎不理解我的错误。
数据来自一个TSV文件，有2列，1-分类2-数字.
<script type = "text/javascript">
var margin = { top:80, bottom:80, right:80, left:80},
width = 960 - margin.left-margin.right,
height = 500 - margin.top - margin.bottom;
var svg
浏览 0提问于2014-04-25得票数 0
回答已采纳
1回答
D3.js与坐标系
javascript、d3.js
尝试D3，并有一些问题。不知道什么是经得起坐标系的最佳方式。请查找下面的消息来源。
编辑:小提琴
我用yScale -> .range([ height - padding, padding]);代替.range([ padding - height - padding]);来模拟倒置坐标。这是最好的方法吗。如果svg中的所有对象都需要正确地定向，那么最好将其应用到最外层的元素中吗？
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin
浏览 1提问于2012-09-07得票数 2
回答已采纳
1回答
使用AngularJS实现D3.js中的条形图
angularjs、d3.js
加载网页时，我在d3条形图中有一个错误
错误：
Error: Invalid value for <rect> attribute y="NaN" , Error: Invalid value for <rect> attribute height="NaN"
我试着通过编辑这段代码来解决这个问题
什么都不管用
var countriesData = data.countries;
var datac=[];
for (var key in countriesData) {
datac.push(
浏览 0提问于2016-01-07得票数 0
1回答
我试图让一个条形图运行基于的例子。
<body>
</body>
<script>
var width = 960, height = 500;
var margin = {top: 20, right: 20, bottom: 30, left: 40};
//data
var data = [ {"x":"A","y":0.15}, {"x":"B","y":0.10}, {&
浏览 3提问于2014-04-21得票数 0
回答已采纳
1回答
无法显示x轴类别并使y轴从0开始
d3.js
在t D3.jsVersion6.7条形图中，我试图对齐x轴以显示类别，并显示y轴从0开始。扩展svg的高度和更改转换似乎不起作用。如何使x轴类别出现在条形图下，并使y轴从0开始？谢谢。
async function barChart() {
const dataset = await d3.csv("https://assets.codepen.io/417105/bodypart-injury-clean.csv");
console.log(dataset);
const width = 400;
const height = 400;
浏览 0提问于2021-05-29得票数 1
回答已采纳
1回答
无法在D3.js中获取条形图上的文本
javascript、d3.js、charts
我对d3非常陌生，我一直在D3中处理文本问题。
下面是条形图的D3代码，我根本无法获得条形图上的文本。文本代码位于底部。我还附上了图表的图片。
<script type = "text/javascript">
var margin = { top: 80, bottom: 80, right: 80, left: 80 },
width = 960 - margin.left - margin.right,
height = 500 - margin.t
浏览 3提问于2014-04-29得票数 0
回答已采纳
0回答
d3 v4为什么我的x轴和条形图不能对齐？
javascript、d3.js、bar-chart、data-visualization
我已经用x轴制作了我的条形图，但我不能弄清楚为什么我不能让条形图和x轴上的刻度间距精确地对齐。此时，刻度线位于条形中心的右侧。
csv文件示例：
crop,records
CASSAVA,350
MAIZE,226
TOMATOES,137
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Abbie's attempt at D3</title>
浏览 0提问于2017-01-06得票数 1
回答已采纳
1回答
错误：<rect>属性和预期长度d3.js
javascript、d3.js、bar-chart
我是d3.js中的新手，我有一个示例CSV文件，如下所示
country, year
China 1,1998-12-1
China 2,1999-12-1
China 3,2000-12-1
Indonesia 1,1999-12-1
Indonesia 2,1999-12-1
Indonesia 3,1998-12-1
Russia 1,1999-12-1
Russia 2,1998-12-1
Russia 3,1999-12-1
Russia 4,1998-12-1
在完成并显示x-轴和y-轴后，无法创建和显示对应的条形图并显示该条。这是完整的代码
import {
select,
浏览 5提问于2019-11-10得票数 0
回答已采纳
我在设置条形(固定宽度)位置时遇到了问题，正确地对齐了x轴标签。
条形和x-滴答没有正确对齐，最后一个条形也是在最大xscale范围之后呈现的。
感谢在解决这一问题上的任何帮助。
请查看这里的示例- 更新和固定版本
function generateChart(){
const data = [{
label: 100,
value: 10
},
{
label: 200,
value: 20
},
{
label: 300,
value: 30
},
{
label: 400,
value: 40
},
{
label: 500,
浏览 0提问于2019-08-26得票数 0
回答已采纳
1回答
D3.js条形图
javascript、html、css、d3.js、bar-chart
<div id="searchVolume"></div>
CSS
#tooltip {
position: absolute;
width: 50px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px
浏览 1提问于2016-06-11得票数 0
回答已采纳
1回答
从d3.js中的CSV中选择一段数据
javascript、arrays、csv、d3.js
我通过创建一个新的csv创建了一个条形图，它是一个更大的数据集的一部分。现在，我希望使用原始数据集中的数据来绘制我的条形图，方法是只选择两个列(Ward和Unemploymet)和一个月数据。我该怎么做？
守则如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unemployment by Ward Bar Chart</title>
<style type="text/css">
.axis t
浏览 2提问于2016-03-30得票数 1
回答已采纳
1回答
d3.js序轴未正确更新
javascript、charts、d3.js
我创建了一个简单的、可更新的d3.js条形图。除了x轴外，它工作得很好。
从图表中删除条形图时，不移除相应的轴标签。
但是，当我第二次移除条子时，在第一次运行中删除的条形码的标签将从轴上移除。
这里发生了什么，为什么？
参见这里的工作演示：
js代码如下：
var BarChart = function (config) {
var data,
svg,
xScale,
yScale,
yAxis,
xAxis;
svg = d3.select('#' + config.targetElem
浏览 3提问于2013-08-30得票数 3
回答已采纳
1回答
如何让d3.js条形图从0开始而不是从顶部开始
javascript、d3.js
我正在尝试构建一个仪表板，在条形图上显示滑雪者的表现。在x轴上，我有不同的运行(总共14个运行)。在Y轴上，我计算了一个从-1.5到1秒的分数。最好，我不希望条形图从顶部开始；我希望它们从0开始。有什么办法可以解决这个问题吗？ ? 下面是包含所有d3.js代码的index.html : csv文件可以在csv上找到 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="view
浏览 22提问于2020-10-10得票数 1
回答已采纳
1回答
D3条形图图形表示问题
javascript、html、d3.js、graph
我试图通过调用JSON API中的数据来使用D3制作条形图，我能够使单个条形图可见，但不能使其他条形图可见。我希望有一些问题的酒吧放置。
在开发者工具中可以看到不同的矩形，但是所有的矩形都出现在同一个位置。
任何帮助都将不胜感激。
// javascript
const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
// Get the data from the JSON api
d3.json(&
浏览 0提问于2020-05-05得票数 0
1回答
缩放只缩放我的轴，而不是我的图形上的物体。
javascript、graph、d3.js、zooming、axis
我现在有一个变焦功能，我刚学会在D3中使用。然而，当我使用它时，它只移动我的，缩放图形的轴，而不是上面的对象。
我对D3很熟悉，希望能帮上忙。
我的javascript源代码张贴在下面：
//Setting generic width and height values for our SVG.
var margin = {top: 60, right: 0, bottom: 60, left: 40},
width = 1024 - 70 - margin.left - margin.right,
height = 668 - margin.t
浏览 1提问于2014-03-26得票数 0
回答已采纳
1回答
为什么我的X(时间)轴上没有滴答声？
javascript、d3.js
问题：
为什么我的X(时间)轴xAxis上没有滴答
代码：
<script type="text/javascript">
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(error, json) {
if (error) {
return console.warn(error);
}
浏览 1提问于2017-04-24得票数 1
回答已采纳
1回答
如何在d3中显示序轴
d3.js、scale、axis
我是d3新手，对显示序轴的标签有问题：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<title>D3: Loading data from a CSV file</title>
</head>
<body>
浏览 0提问于2018-03-18得票数 1
回答已采纳
1回答
散点图点在d3.js中缩放时不保持值
javascript、vue.js、d3.js
这是我第一次使用d3.js，所以请容忍我。我在vue.js文件中实现了这一点，作为纯javascript。我正试图用缩放的能力绘制一个散点图。到目前为止，我几乎所有的东西都能工作，但是当我放大时，我注意到x轴没有适当地缩放，但是y轴正常工作。例如，当看原来的地块时，一个点在x轴上可能在625左右，但放大后在相同的点上会小于600。这并不是在y轴上发生的--这些点的比例是正确的。我假设我的变焦函数中x轴的缩放有问题，但我就是搞不清楚。请看一看，如果你能知道我哪里出了问题，请告诉我。
编辑:我应该提到，这是使用d3.js版本7.4.4
<template>
<div id
浏览 16提问于2022-05-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
