数据驱动的(D3.js)垂直分组柱状图，具有工具提示、可点击的图例和刷选功能。

以下是一个使用D3.js创建数据驱动的垂直分组柱状图的示例代码。该图表具有工具提示、可点击的图例和刷选功能。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Grouped Bar Chart</title>
  <style>
    .bar {
      fill: steelblue;
    }
    
    .bar:hover {
      fill: orange;
    }
    
    .legend {
      cursor: pointer;
    }
    
    .brush .extent {
      fill-opacity: 0.3;
      shape-rendering: crispEdges;
    }
  </style>
</head>
<body>
  <svg id="chart"></svg>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

JavaS cript代码（script.js）：

const data = [
  { group: 'A', value1: 10, value2: 20 },
  { group: 'B', value1: 15, value2: 25 },
  { group: 'C', value1: 5, value2: 15 },
  { group: 'D', value1: 20, value2: 10 },
];

const svgWidth = 500;
const svgHeight = 300;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = svgWidth - margin.left - margin.right;
const height = svgHeight - margin.top - margin.bottom;

const svg = d3.select('#chart')
  .attr('width', svgWidth)
  .attr('height', svgHeight);

const chart = svg.append('g')
  .attr('transform', `translate(${margin.left},${margin.top})`);

const x0 = d3.scaleBand()
  .domain(data.map(d => d.group))
  .rangeRound([0, width])
  .paddingInner(0.1);

const x1 = d3.scaleBand()
  .domain(['value1', 'value2'])
  .rangeRound([0, x0.bandwidth()])
  .padding(0.05);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => Math.max(d.value1, d.value2))])
  .nice()
  .rangeRound([height, 0]);

const color = d3.scaleOrdinal()
  .range(['#98abc5', '#8a89a6']);

const xAxis = d3.axisBottom(x0);
const yAxis = d3.axisLeft(y).ticks(5);

chart.append('g')
  .attr('class', 'x-axis')
  .attr('transform', `translate(0,${height})`)
  .call(xAxis);

chart.append('g')
  .attr('class', 'y-axis')
  .call(yAxis);

const barGroups = chart.selectAll('.bar-group')
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'bar-group')
  .attr('transform', d => `translate(${x0(d.group)},0)`);

barGroups.selectAll('.bar')
  .data(d => Object.entries(d).filter(([key, value]) => key !== 'group'))
  .enter()
  .append('rect')
  .attr('class', 'bar')
  .attr('x', ([key, value]) => x1(key))
  .attr('y', ([key, value]) => y(value))
  .attr('width', x1.bandwidth())
  .attr('height', ([key, value]) => height - y(value))
  .attr('fill', ([key, value]) => color(key));

const legend = chart.append('g')
  .attr('class', 'legend')
  .attr('transform', `translate(${width},${height / 2})`);

legend.selectAll('rect')
  .data(['value1', 'value2'])
  .enter()
  .append('rect')
  .attr('x', 0)
  .attr('y', (d, i) => i * 20)
  .attr('width', 10)
  .attr('height', 10)
  .attr('fill', d => color(d))
  .on('click', toggleData);

legend.selectAll('text')
  .data(['value1', 'value2'])
  .enter()
  .append('text')
  .attr('x', 15)
  .attr('y',

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

展开更多

开发者特惠

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

ECS首年60元

社区干货

**数据预处理**:可视化前要进行数据预处理。这包括数据清理、数据互换、缺失值处理等。保证数据质量与精确性对可视化结论的可信度尤为重要。**选择适宜的可视化工具**:根据您的数据种类和要解决的问题选择适宜的... 适用大数据集的可视化和实践。它有灵活的查询和可视化选项,并提供各种数据库。下面是一个使用Python编程语言和Matplotlib库创建一个带有多个数据系列的堆叠柱状图的代码实现:#```python 示例数据categories ...

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

请求的执行时间可以被定义为一个柱状图,在指定时间片上更新和统计汇总。**(2)Logging**:特点是描述一些离散的(不连续的)事件。例如:应用通过一个滚动的文件输出 debug 或 error 信息,并通过日志收集系统,存储到 Elasticsearch 中;审批明细信息通过 Kafka,存储到数据库(BigTable)中;又或者,特定请求的元数据信息,从服务请求中剥离出来,发送给一个异常收集服务,如 NewRelic。**(3)Tracing:** 特点是它在单次请求的范围内,处理...

字节前端分享|酷炫的可视化大屏代码开源了!

可视化扮演着信息展示和传达、用户体验和互动、数据分析和决策支持、品牌展示和差异化、故事叙述和信息呈现等至关重要的角色。作为可视化图表的重要载体之一,大屏与智能BI产品不管是在产品设计,还是可视化设计的侧... (https://p3-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/d3d20431e1de43db9f2a2b5a77e14ed5~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1714926037&x-signature=mWwUZrGktDnhdypgJYqRPQ5e...

基于 Zeppelin 的 Flink/Spark 云原生实践

可以用于数据摄入、发现、转换及分析,也能够实现数据的可视化,如饼图、柱状图、折线图等。典型使用场景是通过开发 Zeppelin 的代码片段或者 SQL,通过提交到后端实现实时交互,并通过编写 Notebook 的 Paragrap... 通过支持 Zeppelin 跨 namespace 提交作业的功能来用户功能的完整性;![picture.image](https://p3-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/67be82dab1234bd48ad385918236d257~tplv-tlddhu82om-i...

特惠活动

域名注册服务

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

￥1.00/首年起32.00/首年起

立即购买

DCDN国内流量包100G

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

￥2.00/年20.00/年

立即购买

数据驱动的(D3.js)垂直分组柱状图，具有工具提示、可点击的图例和刷选功能。-优选内容

柱状图

长条图用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析。产品提供堆叠柱状图、百分比柱状图和并列柱状图三种组件,并支持灵活配置颜色、排列方式、图例和标签等。 2. 快速... 柱状图第三步按需修改图表格式可按照需求去修改图表的颜色、排列方式、X 轴、Y 轴、图例、标签、提示框等的格式,修改完成后,得到您想要的图表。 3. 功能介绍 3.1 柱状图图标支持 3 种柱状图,点击柱状图图标下的小...

柱状图

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

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

V2.58.1

新增TAB【数据连接类型配置】。【优化】LAS 数据连接支持配置华东区驱动新版本中,数据连接为 LAS 方式的时候,在直连模式下,支持Region中配置为华东区驱动。 2.2.2 数据集新功能【优化】数据集类目逻辑优化为了... 保留分析和topN的分析配置。(2)指标字段修改指标聚合方式后,保留分析和topN的分析配置。【新增】可视化查询支持替换数据集在可视化查询模块,左侧数据集列表区域中,点击数据集的更多操作符,除了添加字段和批量修改...