Thêm các phần tử con vào các nút cụ thể trong biểu đồ có hướng lực bằng cách sử dụng d3js

Question

Tôi muốn thêm các phần tử con khác nhau vào các nút của tôi tùy thuộc vào loại nút. Do đó nút có thuộc tính được gọi là type. Tất cả các nút phải bao gồm một phần tử g với các phần tử con phụ thuộc.

Tôi đã thử điều này bằng cách sử dụng chức năng D3s filter nhưng tôi bị kẹt vì mã của tôi không thêm các phần tử con chỉ một lần trên mỗi nút, nhưng thêm các phần tử con mong muốn nhiều lần (cùng số tiền như tôi có nút). Vì vậy, tôi đoán tôi đang làm điều gì đó sai với việc lựa chọn.

Các nút và liên kết của biểu đồ thay đổi theo thời gian, vì vậy những gì tôi đã làm là lưu trữ lựa chọn đầu tiên và khi nút được thêm vào self.nodes tôi gọi hàm vẽ (Tôi sẽ bỏ qua mã liên kết).

self.domNodes = this.svg.append('g').attr('class', 'nodes').selectAll('.node') 

function draw() { 
    self.domNodes = self.domNodes.data(self.nodes, (node) => node.id) 
    self.domNodes.exit().remove() 

    // all nodes 
    self.domNodes.enter() 
     .append('g') 
     .attr('class', (node) => `node ${node.type}`) 
     .merge(self.domNodes) 

    // contributions 
    self.domNodes.filter((d) => d.type === 'contribution') 
     .append('circle') 
     .attr('r', 4) 
     .attr('fill', 'blue') 

    // persons 
    self.domNodes.filter((d) => d.type === 'person') 
     .append('other elements and attributes...') 

    self.simulation.nodes(self.nodes) 
    self.simulation.force('link').links(self.links) 
    self.simulation.alpha(1).restart() 
} 

Điều gì làm việc là, rằng nó không phân biệt giữa person và contribution và cho biết thêm các yếu tố tôi muốn đặc biệt cho loại hình này, nhưng nó không thêm chỉ có một mỗi g nút, nhưng nó bổ sung thêm một bội số của những người (số lượng nút tôi có) vào mỗi nút g. Nếu tôi tiếp tục gọi chức năng vẽ nó sẽ nối thêm nhiều vòng tròn với các phần tử g của tôi.

<svg> 
    <g> 
     <g class="nodes"> 
      <g class="node contribution" transform="translate(466, 442)"> 
       <circle r="4" fill="blue"></circle> 
       <circle r="4" fill="blue"></circle> 
       <circle r="4" fill="blue"></circle> 
      </g> 
      <g class="node contribution" transform="translate(466, 442)"> 
       <circle r="4" fill="blue"></circle> 
       <circle r="4" fill="blue"></circle> 
       <circle r="4" fill="blue"></circle> 
      </g> 
      <g class="node contribution" transform="translate(466, 442)"> 
       <circle r="4" fill="blue"></circle> 
       <circle r="4" fill="blue"></circle> 
       <circle r="4" fill="blue"></circle> 
      </g> 
      <g class="node person" transform="translate(400, 200)"> 
       <someotherthings></someotherthings> 
       <someotherthings></someotherthings> 
      </g> 
      <g class="node person" transform="translate(400, 200)"> 
       <someotherthings></someotherthings> 
       <someotherthings></someotherthings> 
      </g> 
     </g> 
    </g> 
</svg> 

Tôi đang làm gì sai ở đây? Tôi chỉ muốn circle và các phần tử khác chỉ nối thêm một lần cho mỗi nút.

<svg> 
    <g> 
     <g class="nodes"> 
      <g class="node contribution" transform="translate(466, 442)"> 
       <circle r="4" fill="blue"></circle> 
      </g> 
      <g class="node contribution" transform="translate(466, 442)"> 
       <circle r="4" fill="blue"></circle> 
      </g> 
      <g class="node contribution" transform="translate(466, 442)"> 
       <circle r="4" fill="blue"></circle> 
      </g> 
      <g class="node person" transform="translate(400, 200)"> 
       <someotherthings></someotherthings> 
      </g> 
      <g class="node person" transform="translate(400, 200)"> 
       <someotherthings></someotherthings> 
      </g> 
     </g> 
    </g> 
</svg> 

Mọi trợ giúp đều được đánh giá cao.

Answer 1

Sau khi đọc selection.data trên wiki d3 một lần nữa, tôi cuối cùng đã nhận được nó làm việc.

Tôi đã hợp nhất trước ghi chú của mình, do đó lựa chọn của tôi bao gồm các nút nhập và cập nhật. Những gì tôi đã làm bây giờ là lần đầu tiên để tạo ra các nút nhập, sau đó làm các lựa chọn và các bộ lọc trên chúng và hợp nhất chúng sau đó.

function draw() { 
    self.domNodes = self.domNodes.data(self.nodes, (node) => node.id) 
    self.domNodes.exit().remove() 

    // all nodes 
    const enterNodes = self.domNodes.enter() 
     .append('g') 
     .attr('class', (node) => `node ${node.type}`) 

    // contributions 
    enterNodes.filter((d) => d.type === 'contribution') 
     .append('circle') 
     .attr('r', 4) 
     .attr('fill', 'blue') 

    // persons 
    enterNodes.filter((d) => d.type === 'person') 
     .append('other elements and attributes...') 

    self.domNodes = self.domNodes.merge(enterNodes) 

    self.simulation.nodes(self.nodes) 
    self.simulation.force('link').links(self.links) 
    self.simulation.alpha(1).restart() 
}