d3 - нарисуйте плавную линию, если две окружности или точки расположены близко друг к другу

Question

Я хочу плавные линии.В настоящее время я рисую независимые круги, но я хочу сделать, если две окружности или точки расположены близко друг к другу, а затем нарисовать линию.Пожалуйста, кто-нибудь помогите написать это в коде в d3.js.Любая помощь будет принята с благодарностью.Или, если есть какой-либо другой способ получить сглаживание линий между точками или кругами.

const svg = d3.select('#svg');
let drawing = false;

function draw_point() {
    if (!drawing)
        return;

    const coords = d3.mouse(this);

    const c = svg.append('circle')
      .attr('cx', coords[0])
      .attr('cy', coords[1])
      .attr('r', 5)
      .style('fill','black');
}

svg.on('mousedown', () => {
    drawing = true;
});

svg.on('mouseup', () => {
    drawing = false;
});
svg.on('mousemove', draw_point);

Answer 1

Если вам нужен только описанный эффект, вы можете использовать эти SVG-фильтры:

  <filter id="smin">

    <feGaussianBlur in="SourceGraphic"  
                    result="blur"
                    stdDeviation="3" 
                    color-interpolation-filters="sRGB"></feGaussianBlur>

    <feColorMatrix in="blur" 
                   mode="matrix" 
                   values="
                      1 0 0  0  0  
                      0 1 0  0  0 
                      0 0 1  0  0  
                      0 0 0 19 -9
                   "></feColorMatrix>
  </filter>

Он производит следующее изображение:

Пример кода (вы можете перетаскивать круги):

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

<svg width="600" height="175">
  <filter id="smin">
  
    <feGaussianBlur in="SourceGraphic"  
                    result="blur"
                    stdDeviation="3" 
                    color-interpolation-filters="sRGB"></feGaussianBlur>
                    
    <feColorMatrix in="blur" 
                   mode="matrix" 
                   values="
                      1 0 0  0  0  
                      0 1 0  0  0 
                      0 0 1  0  0  
                      0 0 0 19 -9
                   "></feColorMatrix>
  </filter>
</svg>

<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 20;

var circles = d3.range(20).map(function() {
  return {
    x: Math.round(Math.random() * (width - radius * 2) + radius),
    y: Math.round(Math.random() * (height - radius * 2) + radius)
  };
});

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory10);

svg.append('g')
  .attr('filter', 'url(#smin)')
  .selectAll("circle")
  .data(circles)
  .enter().append("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("cursor", "pointer")
    .attr("r", radius)
    .style("fill", (d, i) => color(i))
    .call(d3.drag() .on("drag", dragged));

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}


</script>