Force-DirectedGraph，節點不移動并卡在地圖中心

我有一個力圖，其中我的節點實際上是一個帶有附加圓圈和附加文本元素的“g”元素。

我的節點有問題，因為它們在拖動時不會移動并且沒有定位在鏈接的尖端。

如果我只將節點更改為簡單的圓圈，那么它可以正常作業。但我無法讓它與“g”元素一起使用。

有人建議我使用 ".attr("transform", function (d) { return "translate(" dx "," dy ")";});" 在我的 ticked() 函式中，因為“g”元素沒有 cx 和 cy 值（因為它們是特定于圓圈的）。

我認為問題出在我創建 drag() 函式的方式上。

任何幫助都非常受歡迎

  ForceGraph(){
    var links = [
        {src:"John",target:"Aurora"},
        {src:"John",target:"Mary"},
        {src:"John",target:"Erik"},
        {src:"John",target:"Susan"},
        {src:"John",target:"Mel"},
   ]

    var nodes = [
        {id:"John"},
        {id:"Aurora"},
        {id:"Mary"},
        {id:"Erik"},
        {id:"Susan"},
        {id:"Mel"},
    ]

    var width = this.$refs.mapFrame.clientWidth // scale to parent container
    var height = this.$refs.mapFrame.clientHeight // scale to parent container


    // Compute values.
    var nodeId = d => d.id // given d in nodes, returns a unique identifier (string)
    const N = d3.map(nodes, nodeId);
   const nodeTitle = (_, i) => N[i];
    const T = d3.map(nodes, nodeTitle);
    
    // Replace the input nodes and links with mutable objects for the simulation.
    nodes = nodes.map(n => Object.assign({}, n));
    links = links.map(l => ({
        orig: l,
        source: l.src,
        target: l.target
    }));
  

    // Construct the forces.
    const forceNode = d3.forceManyBody();
    const forceLink = d3.forceLink(links).id(({index: i}) => N[i]);
    forceNode.strength(-450);
    forceLink.strength(1);
    forceLink.distance(100)


    const simulation = d3.forceSimulation(nodes)
        .force(link, forceLink)
        .force("charge", forceNode)
        .force("x", d3.forceX())
        .force("y", d3.forceY())
        .on("tick", ticked);




    const svg = d3.create("svg")
    .attr("id", "svgId")
        .attr("preserveAspectRatio", "xMidYMid meet")
        .attr("viewBox", [-width/2,-height/2, width,height])
        .classed("svg-content-responsive", true)



    const link = svg.append("g")
        .selectAll("line")
        .data(links)
        .join("line").attr("stroke", "white")
        .attr("stroke-width", "5")
        ;



     var node = svg
        .selectAll(".circle-group")
        .data(nodes)
        .join(enter => {
          node = enter.append("g")        
            .attr("class", "circle-group")
            .call(drag(simulation));
          node.append("circle")
            .attr("class", "background") 
            .style("fill", "blue")
            .attr("r", 30)
           // .call(drag(simulation));
          node.append("text")
            .attr("class", "foreground")
            .attr("dx", function(){return -20})
            .style('font-size', 30 * 0.4   'px')
            .text(({index: i}) => T[i])
           // .call(drag(simulation))
            
          node.attr("stroke", "grey"); 
        })
        node.call(drag(simulation));
        



    function ticked() {
        link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);
        node
        .attr("transform", function (d) { return "translate("   d.x   ","   d.y   ")";});
       // .attr("cx", d => d.x)
       // .attr("cy", d => d.y);
    }


    function drag(simulation) {    
        function dragstarted(event) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        event.subject.fx = event.subject.x;
        event.subject.fy = event.subject.y;
        }
        
        function dragged(event) {
        event.subject.fx = event.x;
        event.subject.fy = event.y;
        }
        
        function dragended(event) {
        if (!event.active) simulation.alphaTarget(0);
        event.subject.fx = null;
        event.subject.fy = null;
        }

        return d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended);
    }



    return  Object.assign(svg.node() );
    }

uj5u.com熱心網友回復：

您的node變數應該是空的，這意味著您沒有更新 tick 函式中的任何內容。這是您加入的一個簡短且孤立的示例，selection.size()之后我會在其中呼叫以查看選擇了多少專案node：

顯示代碼片段

var nodes = [1,2,3];
var svg = d3.select("body").append("svg");
     
var node = svg
   .selectAll(".circle-group")
   .data(nodes)
   .join(enter => {
       node = enter.append("g")        
         .attr("class", "circle-group")
       node.append("circle")
            .attr("class", "background") 
            .style("fill", "blue")
            .attr("r", 30)
       node.append("text")
           
          node.attr("stroke", "grey"); 
})

console.log(node.size());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

這是預期的，連接回傳合并的輸入和更新選擇；但是，由于我們提供了自定義輸入函式，我們需要顯式回傳輸入的節點（如果提供自定義更新函式，我們也需要這樣做）。從檔案：

enter 和 update 函式回傳的選擇被合并，然后由 selection.join 回傳

如果我們添加return node到您的 enter 函式的末尾，我們可以看到我們的選擇大小現在是 3。

顯示代碼片段

var nodes = [1,2,3];
var svg = d3.select("body").append("svg");
     
var node = svg
   .selectAll(".circle-group")
   .data(nodes)
   .join(enter => {
       node = enter.append("g")        
         .attr("class", "circle-group")
       node.append("circle")
            .attr("class", "background") 
            .style("fill", "blue")
            .attr("r", 30)
       node.append("text")
           
          node.attr("stroke", "grey"); 
      return node;
})

console.log(node.size());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

現在node包括輸入的節點，tick 函式應該按預期作業。

另一種方法是在g每個刻度上選擇元素，d3.select(".circle-group")而不是使用node，但是，這不是很高效。

標籤：d3.js

上一篇：D3.js熱圖顏色基于變數值而不是整個表的值

下一篇：visx，如何在mouseEnter上增長餅圖弧？