0

I have a one dimensional chart with points plotted on the axis. There can be overlapping points and I wish to visualize all points that overlap, so I'm looking to use a force directed graph. I wish to anchor the points on the axis but use a force to repel them so you can get a better idea for how many points there are at a given spot.

How would I anchor points along the axis in v6? I created a force directed graph and generated nodes and links. One set of links acts as the axis from which each point has an anchor. The other set of links connects the point to the anchor. I can't figure out how to fix the axis points in place. I found this post which describes a method to preserve edge length in an older version. I am looking to fix the position of some points in my graph and perserve edge distance in v6. My code right now is run of the mill force directed graph:

    var simulation = d3
      .forceSimulation(nodes)
      .force(
        'link',
        d3.forceLink(links).id(d => (d as any).id)
      )
      .force('charge', d3.forceManyBody())
      .force('x', d3.forceX(500 / 2))
      .force('y', d3.forceY(500 / 2))
      .force(
        'collide',
        d3.forceCollide(d => 80)
      );

      const link = fEl
      .append('g')
      .attr('fill', 'none')
      .attr('stroke-width', 1.5)
      .selectAll('line')
      .data(links)
      .join('line')
      .attr('stroke-width', d => Math.sqrt(d.value));

    const node = fEl
      .append('g')
      .attr('stroke', '#fff')
      .attr('stroke-width', 1.5)
      .selectAll('circle')
      .data(nodes)
      .join('circle')
      .attr('r', 5)
      .attr('fill', '#f0f')
      .each(d => (d.fixed = true));

    simulation.on('tick', () => {
      link
        .attr('x1', d => d.source.x)
        .attr('y1', d => d.source.y)
        .attr('x2', d => d.target.x)
        .attr('y2', d => d.target.y);

      node.attr('cx', d => d.x).attr('cy', d => d.y);
    });

How do I anchor the position of a few nodes in my graph?

afriedman111
  • 1,925
  • 4
  • 25
  • 42
  • Other than the color scheme used, the link distance answer you link to works as intended in d3v5,6,7 – Andrew Reid Jul 19 '21 at 21:30
  • Thanks for the response. That post helps solve some of the problem. Is there a way to anchor points to fixed locations. It looked like, in a older version you could set a property like d.fixed = true. Is there a mechanism that does that? – afriedman111 Jul 19 '21 at 21:38
  • 1
    [d.fx/d.fy](https://stackoverflow.com/a/44644069/7106086) is the current method for fixing coordinates. – Andrew Reid Jul 19 '21 at 21:43

0 Answers0