Question

D3气泡图。组和位置svg：circles和svg：文本元素

函数render（）像往常一样创建svg元素，圆和文本。此功能包括.exit.remove更新模式。
runSimulation（）在页面打开和createChart（）函数之后执行。
点击一个圆圈再次执行runSimulation（），删除圆圈使用.exit（）。remove（）等。

简化代码：

fundtion render (){

  const nodeEnter = this.nodeElements
  .enter()
  .append('svg:svg');

   nodeEnter
  .append('circle')
  .on('click',runSimulation);

  const textEnter = this.textElements
  .enter()
  .append('svg:text');
  }



this.runSimulation(){

    this.render();


    function ticked(){
    this.nodeElements
    .attr('cx', cxValue)
    .attr('cy', cyValue):
    }

   this.simulation.nodes.on.('tick',ticked);

   }

在第一次运行时，cx和cy属性被附加到svg：svg，而圆圈没有属性，所有内容都在左上角渲染（也使用svg：g）
对点击动作第二次执行runSimulation;现在圆圈得到附加的cx和cy属性，所有元素都移动到预期的位置。

- 我正在寻找一种方法在第一次渲染时将cx cy属性赋予圆圈，以便父元素不会在x = 0 y = 0处聚类，或者将x和y聚集到svg：svg;显示的模式不起作用，我感谢您的帮助。

Answer 1

 this.nodeElements = this.nodeGroup.selectAll('g')
  .data(this.data, node => node.nodeName);

 this.nodeElements.exit().remove();

 const nodeEnter = this.nodeElements
  .enter()
  .append('g');


nodeEnter
  .append('circle')
  .attr('fill', node => this.color(node.familyType))
  .attr('r', function (node) {
    return (node.nodeName.length > 10) ? "75" : node.nodeName.length*6;
  })
  .on('click', this.runSimulation);

let wrap = (text) => {
  text.each(function() {
    let text = d3.select(this),


const textnode = nodeEnter
  .append('text')
  .attr('id', 'text')
  .attr('text-anchor', 'middle')
  .attr('alignment-baseline', 'middle')
  .attr('dy', '0.1em')
  .attr('font-size', '1.2em');

this.settings.getValue('option1').then((option) => {
  if (option === true) {
    let type = node => node.nodeName;
    textnode
      .text(type);
  }
  if (option === false) {
    let type = node => node.otherName;
    textnode
      .text(type);
  }
})

感谢您的回答，史蒂文。 runSimulation执行一个tick函数，它现在添加了正确的d.x和d.y.我不确定为什么它不起作用 - 离子生命周期事件？

定位和分组SVG D3 / SVG /离子

1 个答案: