SVG D3/SVG/ionic 定位和分组

Question

D3 气泡图。分组和定位 svg:circles 和 svg:text 元素

1. 函数 render() 像往常一样创建一个 svg 元素、圆形和文本。此函数包括 .exit.remove 更新模式。
2. runSimulation() 在页面打开和 createChart() 函数后执行。
3. 点击一个圆圈再次执行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 执行一个刻度函数，该函数现在确实添加了正确的 d.x 和 d.y。我不确定为什么它不起作用 - 离子生命周期事件？