Question

我有一个喜欢的svg

<svg>
<g>
  <rect x='0' y='0' height='20' width='20' class='shape rect'/>
  <text x='10' y='10' text-anchor='middle' alignment-baseline='middle'>A</text>
</g>
</svg>

在用户输入上我试图将形状<rect>替换为不同的形状（比如一个圆圈）

在我的JS中我有：

// New User Data
var myData = [{
  text:A,
  shape:'circle',
  x:10,
  y:10
}];

// Remove existing shape and replace with a new shape
var svg = d3.select('svg');
var g = svg.select('g');
var sh = g.select('.shape);
sh.remove();
var newsh = g.selectAll('.shape').data(myData);
newsh.enter().append('circle').attr({
  cx: function(d){ return d.x;},
  cy: funciton(d){ return d.y;},
  r:10
})
.classed('shape circle',true);

这会在覆盖文本的<text>元素后向组中添加新项目。如何在构建新数据时指定元素的位置。

编辑：FIDDLE

Answer 1

使用selection.append()会将圆圈附加为其父<g>元素的最后一个子元素。因为SVG元素按文档顺序呈现，所以这将覆盖位于新附加的圆之前的文本。您可以使用selection.insert("circle", ":first-child")在组中的第一个元素之前插入圆，因此，在文本元素之前插入圆。

// New User Data
var myData = [{
  text:'A',
  shape:'circle',
  x:10,
  y:10
}];

// Remove existing shape and replace with a new shape
var svg = d3.select('svg');
var g = svg.select('g');
var sh = g.select('.shape');
sh.remove();
var newsh = g.selectAll('.shape').data(myData);
newsh.enter().insert('circle', ':first-child').attr({
  "cx": function(d){ return d.x;},
  "cy": function(d){ return d.y;},
  "r":10
})
.classed('shape circle',true);

text {
 fill: white;
}

<script src="https://d3js.org/d3.v3.js"></script>
<svg>
<g>
  <rect x='0' y='0' height='20' width='20' class='shape rect'/>
  <text x='10' y='10' text-anchor='middle' alignment-baseline='middle'>A</text>
</g>
</svg>

D3如何更换SVG元素

1 个答案: