D3.js:如何遵循一般更新模式来转换嵌套元素?
问题描述:
我正在与D3.js合作,并正在学习general update pattern。我知道它的简单数据结构(我想!),但我想创建一个嵌套的DOM元素集:包含路径和文本元素的组。我不清楚如何访问嵌套的元素的更新/输入/退出选择。D3.js:如何遵循一般更新模式来转换嵌套元素?
总之,这是我想结束了SVG结构:
<g class="team">
<path class="outer" d="..."></path>
<text class="legend" x="890" dy=".2em" y="23">Red Sox</text>
</g>
<g class="team">
<path class="outer" d="..."></path>
<text class="legend" x="890" dy=".2em" y="23">Yankees</text>
</g>
而且我希望能够明确地访问更新/输入/选择选择每个元素。我的数据是这样的:
[
{ "name": "Red Sox", "code": "RED", "results": [...] },
{ "name": "Yankees", "code": "YAN", "results": [...] },
]
这是我的代码 - 看到它在全在的jsfiddle:http://jsfiddle.net/e2vdt/6/
function update(data) {
// Trying to follow the general update pattern:
// http://bl.ocks.org/mbostock/3808234
// Join new data with old elements, if any.
var g = vis.selectAll("g.team").data(data, function(d) {
return d.code;
});
// Update old elements as needed.
// QUESTION: How to get the update selection for the text elements?
// Currently the text element is not moving to the right position.
g.selectAll("text.legend").transition()
.duration(750)
.attr("y", function(d, i) { return i * 32 + 100; });
// Create new elements as needed.
var gEnter = g.enter()
.append("g").attr("class","team");
gEnter.append("text").attr("class", "legend")
.attr("dy", ".35em")
.attr("y", function(d, i) { return i * 32 + 100; })
.attr("x", "20")
.style("fill-opacity", 1e-6)
.text(function(d) { return d.name; })
.transition()
.duration(750)
.style("fill-opacity", 1);
// TBA: Add path element as well.
// Remove old elements as needed.
g.exit()
.transition()
.duration(750)
.attr("y", "0")
.style("fill-opacity", 1e-6)
.remove();
}
的进入和退出的选择都工作正常,但我不知道知道如何获取更新选择,以便我可以将文本标签移动到正确的位置。 “Red Sox”条目应该沿着页面向下移动,但事实并非如此。
答
它工作正常,你只需要改变你如何定位g元素。
g.transition()
.duration(750)
.attr("transform", function(d, i) {
return "translate(0,"+(i * 32 + 100)+")";
});
的<g>
元素没有x
& y
属性,所以你必须使用SVG变换定位。
下面是一些关于它的更多信息:https://developer.mozilla.org/en-US/docs/SVG/Element/g
谢谢!实际上,我明确地想要定位'text'元素而不是'g' - 这是因为我想要定位'path'元素,一旦我找到了解决方法。我试过http://jsfiddle.net/e2vdt/11/ - 我只是不知道如何获得这些文本元素的更新选择。 – Richard 2013-04-30 10:27:30
啊,它的工作正如你所期望的那样 - 除非你正在更新它..到底是在哪里。看看如果你调整更新位置的计算方式会发生什么:http://jsfiddle.net/e2vdt/14/(为清晰起见添加了样式) – minikomi 2013-04-30 23:36:04
你摇滚,谢谢! – Richard 2013-05-01 13:16:56