我正在可视化显示给定城市中最常见的音乐会类型。目前，我正在使用d3面积图显示数据。
为了使可视化在主题上更加合适，我认为我会尝试使其看起来类似于音频波形，而这正是我遇到的绊脚石。
目前，我仍在使用沿X轴镜像的面积图，当数据在相当长的时间内散布时，这对于某些城市来说看起来不错。但是，在看有很多事件的大城市时，它看起来并不正确。
在这里看起来还可以：
这里不是很好：
我想我想做的是在面积图的边界内绘制较小的矩形，首先我以为可以使用SVG面积作为遮罩，但是矩形的顶部最终会倾斜...
还考虑只为每个数据点制作一个带有多个条形图的条形图，但我认为这会导致每个点之间的巨大变化。我仍然希望从面积/折线图中得到的数据点之间保持倾斜。
任何人有任何建议吗？我的目标是使可视化如下所示：
最佳答案
一种方法是不使用数据来创建图表，而使用创建锯齿状线性比例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/