更新数据后保留D3图的位置

Keep position of D3 graph after updating data

本文关键字：位置 D3 保留 数据 更新      更新时间：2024-05-04

我有以下问题。我在D3中创建了一个图形。我添加了一个下拉菜单，可以根据所选类别调整图形节点的大小。为此，我编写了一个函数，每次在下拉菜单中选择一个选项时都会重新运行javascript代码。然而，更新后的图表出现在我网站的末尾。有没有办法将图形保持在原来的位置？我试着把它放在div中并固定位置，但没有成功。我希望我的问题是清楚的。

在下面的代码中找到一个玩具示例。

干杯！

<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>

问题是将SVG附加到正文，因此它总是显示在页面的最后。正确的方法是创建一个带有ID（唯一）的div（或其他任何东西）：

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

然后附加SVG：

var svg = d3.select("#svghere")
    .append("svg")
    .//the rest of the code
相关文章：