javascript - d3 - 带圆圈的正弦波，问题是圆圈在曲线中重叠

Question

我有大约 75 个数据点。每个点都表示为一个圆圈，并与正弦波对齐。正常的正弦波是水平的，但我希望它是垂直的。第一个点从宽度的一半开始。

问题是曲线中的圆是重叠的。我试图在高度、半径等方面进行一些小的修改，但无法完全避免重叠。

我还没有开发出计算圆圈位置的函数，但位置设置如下:

    .attr("cx", function(d,i){ return (Math.sin(i/7)) * width/2.3 + width /2})
    .attr("cy", function(d,i){ return (i + 0.5) * (height-margin.bottom-margin.top) / len(data); })

svg 的高度和宽度设置为 1,000。如果方法可以避免重叠，它们可以更长并且圆的半径可以更小。但我相信会有一种更好、更优雅的方法来使圆圈具有相同的高度和相同的半径。例如，波浪的宽度可以更小，这样更多的波浪可以容纳在相同的高度，然后圆圈可以更分散。但老实说，我不知道如何计算这个。

如果你能帮助我，我将不胜感激。

Answer 1

为了减少正弦曲线两端的重叠，我不会直接使用正弦计算来定位圆圈。相反，如果您绘制正弦曲线，然后使用该路径以固定间隔放置圆圈，则重叠会减少。根据路径的长度和圆的半径，仍然可能有一些。

例如，查看嵌入的代码片段。

该片段使用生成的数据绘制正弦路径(调整范围和频率以绘制具有不同长度和曲线数量的曲线)。

绘制曲线，并使用节点路径的长度来确定每个圆的 x 和 y:

let height = 800
    let width =  height
    let margin = 50
    
    let sineData = d3.range(0, 101).map(function(k) {
      let freq = 0.05
      var value = [freq * k * Math.PI, Math.sin(freq * k * Math.PI)];
      return value;
    });
    
    let sineX = d3.scaleLinear()
    	.domain([-1, 1])
    	.range([0, width])
		
    let sineY = d3.scaleLinear()
    	.domain(d3.extent(sineData, function(d) {
   			 return d[0]
      }))
    	.range([0, height])
      
   	let line = d3.line()
      .x(function(d) {
        return sineX(d[1]);
      })
      .y(function(d) {
        return sineY(d[0]);
      })
    	.curve(d3.curveLinear)
        
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin + margin)
      .attr("height", height + margin + margin)

    var g = svg.append('g')
    	.attr('transform', 'translate(' + margin + ',' + margin + ')')
    
    var sinePath = g.append('path')
    	.datum(sineData)
    	.attr('d', line)
      .style('stroke', 'black')
      .style('stroke-width', 1)
      .style('fill', 'none')
    
    let n = 150
    let circleData = d3.range(0, n).map(function(k) { return k })
    let node = sinePath.node()
  
    let scaleLength = d3.scaleLinear()
      .domain([0, n-1])
      .range([0, node.getTotalLength()])
    
    var circleX = function(i){
      return node.getPointAtLength(scaleLength(i)).x
    }

    var circleY = function(i){
      return node.getPointAtLength(scaleLength(i)).y
    }
    
    g.selectAll('circle')
    	.data(circleData)
    	.enter()
    	.append('circle')
    	.style('fill', 'grey')
    	.style('opacity', 0.5)
    	.attr('r', 10)
      .attr("cx", function(d, i){ return circleX(i) })
      .attr("cy", function(d, i){ return circleY(i) })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>