d3力圖，根據連接鏈接的數量有條件地渲染節點

我有一個力導向圖，其中節點的大小取決于它們連接到的鏈接數量。

我想做的是以下內容：使節點有條件地呈現，以便“d.weight”低于 21 的節點附加一個文本元素，而那些等于或高于 21 的節點附加一個圓形元素。

下面是我的代碼不起作用。問題可能來自“測驗”變數。任何幫助都非常受歡迎

        var node = g
        .selectAll(".circle-group")
        .data(nodes)
        .join(enter => {
          node = enter.append("g")        
          .attr("class", "circle-group")


          var test = function(d){ link.filter(function(l) {
          return l.source.index == d.index || l.target.index == d.index
          }).size();  }


            //NODE BACKGROUND CIRCLE
          node.append("circle")
          .attr("class", "background") 
          .style("fill", "#e7c203")
          .attr("r", function(d) {     
          d.weight = link.filter(function(l) {
          return l.source.index == d.index || l.target.index == d.index
          }).size();      
          if(d.weight < 2){return "2px"}
          else if(d.weight >= 2 && d.weight < 6){return "5px"}
          else if(d.weight >= 6 && d.weight < 21){return "10px"}
          else if(d.weight >= 21){return "15px"}
          else{return "200px"}
          })
           
           //NODE TEXT FOREGROUND
          if(test < 21){ 
            node.append("text")
            .attr("text-anchor", "middle")
            .attr("dominant-baseline", "central") 
            .text(function(d){return d.id})
            .attr("fill", "white")
            .attr('stroke', 'white')
            .attr('stroke-width', '0.1px')
            .attr("y", -7)
            .style("font-size", "5px")

          //NODE IMAGE FOREGROUND
          }else{ 
            node.append("circle")
            .attr("class", "foreground") 
            .style("fill", d => `url(#${d.id})`)
            .attr("r", function(d) {      
            d.weight = link.filter(function(l) {
            return l.source.index == d.index || l.target.index == d.index
            }).size();      
            if(d.weight < 2){return "2px"}
            else if(d.weight >= 2 && d.weight < 6){return "5px"}
            else if(d.weight >= 6 && d.weight < 21){return "10px"}
            else if(d.weight >= 21){return "15px"}
            else{return "200px"}
            }) 
          }
            
          node.attr("stroke", "#e7c203").call(drag(simulation));
        })

uj5u.com熱心網友回復：

好的，所以我終于自己想通了。

訣竅是過濾節點，然后附加所需的元素。就我而言，因為我想附加不同的元素，所以我必須過濾兩次（每個條件一次）

這是下面的固定代碼：

var node = g
        .selectAll(".circle-group")
        .data(nodes)
        .join(enter => {
          node = enter.append("g")        
          .attr("class", "circle-group")


          var test = function(d){ link.filter(function(l) {
          return l.source.index == d.index || l.target.index == d.index
          }).size();  }


            //NODE BACKGROUND CIRCLE
          node.append("circle")
          .attr("class", "background") 
          .style("fill", "#e7c203")
          .attr("r", function(d) {     
          d.weight = link.filter(function(l) {
          return l.source.index == d.index || l.target.index == d.index
          }).size();      
          if(d.weight < 2){return "2px"}
          else if(d.weight >= 2 && d.weight < 6){return "5px"}
          else if(d.weight >= 6 && d.weight < 21){return "10px"}
          else if(d.weight >= 21){return "15px"}
          else{return "200px"}
          })
           
           //NODE TEXT FOREGROUND
             node.filter(function(d){ return d.weight<6 }).append("text")
            .attr("text-anchor", "middle")
            .attr("dominant-baseline", "central") 
            .text(function(d){return d.id})
            .attr("fill", "white")
            .attr('stroke', 'white')
            .attr('stroke-width', '0.1px')
            .attr("y", -7)
            .style("font-size", "5px")

          //NODE IMAGE FOREGROUND
         node.filter(function(d){ return d.weight>5 }).append("circle")
            .attr("class", "foreground") 
            .style("fill", d => `url(#${d.id})`)
            .attr("r", function(d) {      
            d.weight = link.filter(function(l) {
            return l.source.index == d.index || l.target.index == d.index
            }).size();      
            if(d.weight < 2){return "2px"}
            else if(d.weight >= 2 && d.weight < 6){return "5px"}
            else if(d.weight >= 6 && d.weight < 21){return "10px"}
            else if(d.weight >= 21){return "15px"}
            else{return "200px"}
            }) 
          
            
          node.attr("stroke", "#e7c203").call(drag(simulation));
        })

標籤：d3.js

上一篇：如何根據D3中的分類資料繪制線和點的集合？

下一篇：Utils的輸出格式是什么？（在vanillajs中使用chartjs，而不是react/angular）