更新數據後保留D3圖的位置

我有以下問題。我在D3中創建了一個圖表。我添加了一個下拉菜單，根據所選類別調整圖表的節點。爲此，我編寫了一個函數，可以在每次選擇下拉菜單中的選項時重新運行javascript代碼。但是，更新後的圖表出現在我的網站末尾。有沒有辦法讓圖形保持原來的位置？我試圖把它放在一個div並修復位置，但那並沒有解決。我希望我的問題清楚。更新數據後保留D3圖的位置

在下面找到我的代碼的玩具示例。

乾杯！

<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> 


<style type="text/css"> 

</style> 


</head> 
<body> 

<select onchange="change(this)"> 
    <option value="rad1">Option 1</option> 
    <option value="rad2">Option 2</option> 
</select> 

<p> This is some text above the plot </p> 

<script type="text/javascript"> 

change('rad1') 

function change(dd) { 
    update(dd.value) 
} 

function update(rad) { 

    var current = rad; 

    d3.selectAll('svg').remove(); 


    var w = 500; 
    var h = 300; 


    var dataset = { 
     nodes: [ 
     { name:'Node 1',rad1: 1.31, rad2: 2.32 }, 
     { name:'Node 2',rad1: 2.12, rad2: 5.00 }, 
     { name:'Node 3',rad1: 40.30, rad2: 20.40 } 
     ], 
     edges: [ 
     { source:0, target:0,rad1: 3.31 }, 
     { source:0, target:1,rad1: 3.31}, 
     { source:1, target:2,rad1: 20.31} 
     ] 
    }; 


    var force = d3.layout.force() 
    .nodes(dataset.nodes) 
    .links(dataset.edges) 
    .size([w, h]) 
    .linkDistance([100]) 
    .charge([-300]) 
    .start(); 

    var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 

var edges = svg.selectAll("line") 
    .data(dataset.edges) 
    .enter() 
    .append("line") 
    .style("stroke", "#808080") 
    .style("stroke-width", 1) 
    .style("stroke-opacity", 0.1); 


var nodes = svg.selectAll("circle") 
    .data(dataset.nodes) 
    .enter() 
    .append("circle") 
    .attr("r", function(d) { 
     if(current == "rad1") { 
     return d.rad1; 
     } else { 
     return d.rad2; 
     } 
    }) 
    .style("fill", function(d, i) { 
     return '#000000'; 
    }) 
    .call(force.drag) 
    .on("click", function(d) { 
     console.log("Name: " + d.name); 
    }); 


force.on("tick", function() { 

    edges.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

    nodes.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 

}); 


} 

</script> 

<p> Here is more text below the plot </p> 

</body> 
</html>

來源

2016-04-10 Peanut

問題是，您正在將SVG附加到正文，因此它會始終顯示在頁面的最後。正確的方法是創建一個div（或其他東西）與ID（這是唯一的）：

<div id="svghere"></div>

再追加SVG：

var svg = d3.select("#svghere") 
    .append("svg") 
    .//the rest of the code

來源

2016-04-10 22:40:49

當你說「我試圖把它一個div「，你是否嘗試過這種方式？ –

完美的解決了這個問題。不，我做了別的。我把它放在一個div中，並改變了在CSS中的位置... – Peanut

太棒了！請記住：類可以共享，但ID是唯一的。這個HTML中沒有其他的東西具有相同的ID。 –

更新數據後保留D3圖的位置

回答

相關問題