更新数据后保留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图的位置

回答

相关问题