个人中心
gpt4 book ai didi

javascript - 用 d3 模拟音频波形

转载 作者：行者123 更新时间：2023-11-30 19:46:41 25 4
gpt4 key购买 nike

我正在制作一个可视化图表，显示给定城市中最常见的音乐会类型。目前我正在使用 d3 面积图显示数据。

data visualised using only area chart

为了使可视化更符合主题，我想我会尝试让它看起来类似于音频波形，这就是我遇到的一个绊脚石。

目前我仍在使用在 x 轴上镜像的面积图，当数据分散在很长一段时间内时，这对于某些城市来说看起来不错。然而，当观察一个有很多事件的大城市时，它看起来并不正确。

这里看起来不错: Dublin, Ireland

这里不太好: London, UK

我想我想做的是在面积图的边界内绘制较小的矩形，首先我想我可以使用面积 SVG 作为 mask ，但矩形的顶部最终会倾斜......

还考虑过为每个数据点制作一个包含多个条形的条形图，但我认为这会导致每个点之间发生很大的变化。我希望从面积图/折线图获得的数据点之间仍然存在倾斜。

有人有什么建议吗？我的目标是获得如下所示的可视化效果:

desired outcome - more details

desired outcome - less details

最佳答案

一种方法是不使用数据来创建图表，而是使用数据来创建锯齿状线性刻度 x -> y。接下来，生成所需数量的矩形，并将它们的索引映射到 x 位置。休息很简单——遍历索引，将它们映射到 x，将得到的 x 映射到 y，然后就可以了。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
    var data = [{
      x: 1,
      y: 2
    }, {
      x: 5,
      y: 10
    }, {
      x: 15,
      y: 5
    }, {
      x: 20,
      y: 13
    }, {
      x: 25,
      y: 4
    }];
    
    var rectCount = 8;
    
    var yScale = d3.scaleLinear()
    	.domain(data.map(function(d){ return d.x; }))
    	.range(data.map(function(d){ return d.y; }));
    
    var xScale = d3.scaleBand()
    	.domain(d3.range(rectCount))
    	.paddingInner(0.5)
    	.range([d3.min(data, function(d) {return d.x; }),
              d3.max(data, function(d) {return d.x; })]);
    
    var svg = d3.select("body").append("svg")
      .attr("width", 100)
      .attr("height", 100)
    	.attr('viewBox', '-5 -20 35 40');

    var chartData = d3.range(rectCount).map(function(i){
      var x = xScale(i);
      var width = xScale.bandwidth();
      var y = yScale(x);
      var height = y*2;
      return {
        x: x,
        y: y,
        width: width,
        height: height
      };
    });
    
    svg.selectAll('rect')
    	.data(chartData)
    .enter()
    	.append('rect')
    	.attr('x', function(d) { return d.x; })
    	.attr('y', function(d) { return -d.y; })
    	.attr('width', function(d) { return d.width; })
    	.attr('height', function(d) { return d.height; })

  </script>
</body>

关于javascript - 用 d3 模拟音频波形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54864881/

25 4 0
文章推荐： c - 在 C 中将指针作为函数参数传递
文章推荐： c# - Active Directory 组中的 samAccountType 是什么意思？
文章推荐： 将数字转换为二进制
文章推荐： c# - 带反向引用的正则表达式前瞻
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com