D3 - 响应式地在柱状图顶部显示/隐藏柱状图总数

以下是一个使用D3.js库创建柱状图，并在顶部显示/隐藏柱状图总数的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D3.js Bar Chart with Total Count</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        
        .bar:hover {
            fill: brown;
        }
        
        .axis {
            font-size: 12px;
            font-family: sans-serif;
        }
        
        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
        }
        
        .total-count {
            font-size: 16px;
            font-weight: bold;
            text-anchor: middle;
        }
    </style>
</head>
<body>
    <svg id="chart"></svg>

    <script>
        // 数据
        var data = [10, 20, 30, 40, 50];

        // 创建SVG容器
        var svg = d3.select("#chart")
            .attr("width", 400)
            .attr("height", 200);

        // 创建柱状图
        var barWidth = 40;
        var barSpacing = 10;
        var barHeightScale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, 150]);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", function (d, i) {
                return i * (barWidth + barSpacing);
            })
            .attr("y", function (d) {
                return 200 - barHeightScale(d);
            })
            .attr("width", barWidth)
            .attr("height", function (d) {
                return barHeightScale(d);
            })
            .attr("class", "bar");

        // 显示/隐藏总数
        var totalCount = d3.sum(data);
        var isTotalCountVisible = true;

        var totalCountText = svg.append("text")
            .attr("x", 200)
            .attr("y", 30)
            .attr("class", "total-count")
            .text("Total Count: " + totalCount)
            .style("opacity", isTotalCountVisible ? 1 : 0);

        svg.on("click", function () {
            isTotalCountVisible = !isTotalCountVisible;
            totalCountText.style("opacity", isTotalCountVisible ? 1 : 0);
        });
    </script>
</body>
</html>

上述代码创建了一个简单的柱状图，其中包含5个柱子，每个柱子的高度由数据数组中的值确定。通过单击SVG容器，可以切换显示/隐藏总数。

总数的初始状态为可见，单击SVG容器时使用isTotalCountVisible变量来切换其显示状态。总数文本元素使用totalCountText变量创建，并在切换状态时设置其透明度。

注意：在上面的示例中，使用的是D3版本7，您需要确保在HTML中正确引入D3.js库。

本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。

展开更多

开发者特惠

面向开发者的云福利中心，ECS 60元/年，域名1元起，助力开发者快速在云上构建可靠应用

ECS首年60元

社区干货

火山引擎基于 Zeppelin 的 Flink/Spark 云原生实践

如饼图、柱状图、折线图等。典型使用场景是通过开发 Zeppelin 的代码片段或者 SQL,通过提交到后端实现实时交互,并通过编写 Notebook 的 Paragraph 集合,借助调度系统实现定时调度任务。![](https://p3-juejin.... 这种方式和 Session 模式的区别是集群资源固定,即 JM、TM 的数目和所使用的资源是固定的,无法根据 TM 代码的执行情况动态调整,用户也无法指定资源。![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75ba...

大数据技术探索:学习、应用与未来趋势 | 社区征文

# 前言大数据可视化是一种利用图表、图形和别的视觉元素来显示大型数据集的技术。可以帮助大家找到数据中的方法、趋势和关联,随后适用决策、难题改进和洞悉发觉。![picture.image](https://p6-volc-community-... **视觉元素设计**:为了科学地传送数据的数据,我们应该细心选择视觉元素。这包括选择适宜的图表类型(如柱形图、折线图、分散点图、蛋糕图等),确立色彩、标示、文字大小等。**互动可视化**:通过添加互动原素,用户可...

一文带你读懂:云原生时代业务监控|社区征文

并做出响应、解决问题,进而保证产品的稳定性,提升用户体验。过去单体服务或者微服务时代,对我们 JavaBoy 来说,或是通过 SpringBoot 的 Actuator 模块实现了本地应用的监控与管理,或者通过 javamelody 对 Tomcat ... 或者一个时间段内的柱状图。例如:队列的当前深度可以被定义为一个计量单元,在写入或读取时被更新统计;输入 HTTP 请求的数量可以被定义为一个计数器,用于简单累加;请求的执行时间可以被定义为一个柱状图,在指定时...

干货|七个方向,基于开源工具构建一款智能化BI

**图表是BI产品中最常用的数据可视化工具之一。** 通过图表,用户可以更直观地了解数据的趋势、关系和分布。常见的图表类型包括折线图、柱状图、饼图、散点图等等。 **不同的图表类型适用于不同的数据类型和分析目的。** 例如,折线图可以展示时间序列数据的趋势,柱状图可以比较不同类别的数据,饼图可以显示数据的占比等等,选择适合的图表类型对于用户理解数据非常重要。 **/ 可视化展现形...

特惠活动

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选

￥1.00/首年起32.00/首年起

立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠

￥2.00/年20.00/年

立即购买

D3 - 响应式地在柱状图顶部显示/隐藏柱状图总数-优选内容

柱状图与条形图

可视化图表

柱状图

第二步选择柱状图点击图表面板上的柱状图图标选择柱状图,系统会按照默认设置展示出柱状图第三步按需修改图表格式可按照需求去修改图表的颜色、排列方式、X 轴、Y 轴、图例、标签、提示框等的格式,修改完成后,得到您想要的图表。 3. 功能介绍 3.1 柱状图图标支持 3 种柱状图,点击柱状图图标下的小三角进行切换。 3.1.1 堆叠柱状图维度:支持 1 个或多个维度。如果超过 1 个维度,则会在柱形中叠加显示,使用不同颜色区分。指标:支...

2024年03月

请在部署时告知并开启对应功能开关。优化首页ID展示功能优化,支持垂直柱状图展示以及放大功能,在垂直柱状展示中用户可通过右侧控件下划查看所有ID。优化群体画像标签分析详情中支持展示获取的标签日期... 支持对图表添加总结描述。报告数据下载:暂不支持图表数据下载:下载分tab展示,tab1展示左侧数据,tab2&3展示被联动的数据。联动图表柱形图支持排序,与整体页面排序规则保持一致优化指标配置中数值类型标签支...

柱状图

本文介绍介绍各项图表参数配置。图表说明柱状图常用于展示分类数据,每个分类为一个柱状图形,其高度为每一分类的数值大小。在仪表盘中添加柱状图的操作步骤,请参考添加图表到仪表盘。说明使用统计图表之前,请先阅读注意事项。通用配置对指定类型的统计图表进行全局配置,该配置对整个图表范围生效。柱状图支持的通用配置如下。配置说明面板配置标题设置柱状图标题。显示图表标题栏勾选显示图表标题栏后,将在柱状...