Question

我正在开发一个小应用程序，以在d3js的圆圈内显示一些数据

我的问题是，有时我的圆圈移到SVG的高度和宽度之外，我们再也看不到数据了。

我一直在寻找一个设置min-max height-widht的函数，我在D3js的版本3中找到了一个，但在版本4中却找不到

我尝试使用forceX和forceY，但是它使所有数据居中，我希望它们能够在svg中无处不在而没有forceX和forceY给人的重力印象

这是我的代码的一部分：

    const simulation = forceSimulation()
  .force('link', forceLink().id((d) => d['id']).distance(1).strength(1))
  .force('charge', forceManyBody())
  .force('center', forceCenter(width / 2, height / 2))
  .force('collide', forceCollide(d => calculCollide(d)))
json('assets/example.json', (err, data) => {
  const link = svg.append('g')
    .attr('class', 'links')
    .selectAll('line')
    .data(data['links'])
    .enter()
    .append('line')
    .attr('stroke-width', (d) => Math.sqrt(d['value']));

  const node = svg.append('g')
    .attr('class', 'nodes')
    .selectAll('circle')
    .data(data['nodes'])
    .enter()
    .append('g')
    .attr('class','gcircle')
    .append('circle')
    .attr('r', (d) => radiusGroup(d))
    .attr('fill', (d) => color(d['group']))
    .call(drag()
      .on('start', dragStarted)
      .on('drag', dragged)
      .on('end', dragEnded)
    );
  node.append('title')
    .text((d) => d['id']);

  let text = svg.selectAll('.gcircle')
    .append('text')
    .attr("font-family", "sans-serif")
    .attr("font-size", "10px")
    .text(d => d['id']);

  simulation
    .nodes(data['nodes'])
    .on('tick', ticked);

  simulation.force<ForceLink<any, any>>('link')
    .links(data['links']);

  function ticked() {
    link
      .attr('x1', function(d) { return d['source'].x; })
      .attr('y1', function(d) { return d['source'].y; })
      .attr('x2', function(d) { return d['target'].x; })
      .attr('y2', function(d) { return d['target'].y; });

    node
      .attr('cx', function(d) { return d['x']; })
      .attr('cy', function(d) { return d['y']; });
    text
      .attr('dx', d =>  { return d['x'];}) 
      .attr('dy', d =>  { return d['y'];});   
  }

});


function dragStarted(d) {
  if (!event.active) { simulation.alphaTarget(0.9).restart(); }
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = event.x;
  d.fy = event.y;
}
function radiusGroup(d) {

  if (d.group === 1) {
    return 15;
  } else {
    return 10;
  }
}

function dragEnded(d) {
  if (!event.active) { simulation.alphaTarget(0); }
  d.fx = null;
  d.fy = null;
}

function calculCollide(d){

  if(d.group === 1) {
    return 25;
  } else {
    return 10;
  }
}

PS：我在d3js中使用angular，所以我使用@ types / d3

这是一个堆栈闪电：https://stackblitz.com/edit/angular-tpbq2t，但是随着更多的数据圈可以进入屏幕之外...这就是我的问题...

D3js V4.13设置最小最大高度/宽度

0 个答案: