使用selectAll()创建新元素同时保留现有元素 [英] Using selectAll() to create new elements while preserving existing elements
问题描述
我正在尝试完成一些d3教程,所以请忍受我的菜鸟问题.据我了解,为了创建某种类型的新元素,必须在不存在的元素上使用.selectAll()
,然后使用.append()
来创建它们.当不存在与指定选择器匹配的现有元素时,这种方法效果很好,但是如果存在,它将选择该/这些元素并在其中添加新元素.举个例子:
I'm trying to work through some d3 tutorials so please bear with my noob questions. As I understand it, in order to create new elements of a certain type, you have to use .selectAll()
on the non-existing elements and then use .append()
to create them. That works great when there are no existing elements matching the specified selector, but if there are, it will select that/those elements and append the new elements inside them. Take this example:
d3.json("virusOrigins.json", function(dataset) {
var w = 200;
var h = 300;
var barPadding = 1;
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d.value; })])
.rangeRound([5, w])
.nice();
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// append base rectangle
.append("rect")
.attr("width", w)
.attr("height", h)
.attr("fill", "#ccc");
svg.selectAll("rect.bars")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d, i) {
return i * (h / dataset.length);
})
.attr("x", 0)
.attr("width", function (d) {
return xScale(d.value);
})
.attr("height", function(d) {
return (h / dataset.length) - barPadding;
})
.attr("fill", "#f33")
.classed("bars", true);
});
这将产生以下HTML:
This results in the following HTML:
<svg width="200" height="300">
<rect width="200" height="300" fill="#ccc">
<rect y="0" x="0" width="13" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="33.333333333333336" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="66.66666666666667" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="100" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="133.33333333333334" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="166.66666666666669" x="0" width="200" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="200" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="233.33333333333334" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
<rect y="266.6666666666667" x="0" width="5" height="32.333333333333336" fill="#f33" class="bars"></rect>
</rect>
</svg>
如何使动态创建的rect成为基本rect的兄弟?
How can I get the dynamically created rect's to be siblings of the base rect?
推荐答案
您要在svg
中保存rect
,然后将其追加.只需保存svg
元素即可:
You're saving the rect
in svg
and then appending to it. Simply save the svg
element instead:
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// append base rectangle
svg.append("rect")
.attr("width", w)
.attr("height", h)
.attr("fill", "#ccc");
svg.selectAll("rect.bars")
.data(dataset)
.enter()
.append("rect")
// etc
这篇关于使用selectAll()创建新元素同时保留现有元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!