javascript 按其数据选择 d3 节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22507072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select d3 node by its datum
提问by Jezen Thomas
I'd like to select a node in a callback without using d3.select(this).
我想在不使用d3.select(this).
I have some code that draws a pie…
我有一些绘制馅饼的代码......
function drawPie(options) {
options || (options = {});
var data = options.data || [],
element = options.element,
radius = options.radius || 100,
xOffset = Math.floor(parseInt(d3.select(element).style('width'), 10) / 2),
yOffset = radius + 20;
var canvas = d3.select(element)
.append("svg:svg")
.data([data])
.attr("width", options.width)
.attr("height", options.height)
.append("svg:g")
.attr("transform", "translate(" + xOffset + "," + yOffset + ")");
var arc = d3.svg.arc()
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(data) {
return data.percentageOfSavingsGoalValuation;
});
var arcs = canvas.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path")
.on("mouseover", divergeSlice);
You'll notice at the end I have a call to divergeSlice(). That looks like this:
你会注意到最后我接到了一个电话divergeSlice()。看起来像这样：
function divergeSlice(datum, index) {
var angle = (datum.endAngle + datum.startAngle) / 2,
x = Math.sin(angle) * 10,
y = -Math.cos(angle) * 10;
d3.select(this)
.transition()
.attr("transform", "translate(" + x + ", " + y + ")");
}
This works, but I'd like to accomplish this without using thisas I mentioned earlier. When I log the datumobject, I get something like the following:
这有效，但我想在不使用this之前提到的情况下完成此操作。当我记录datum对象时，我得到如下内容：
{
data: {
uniqueID: "XX00X0XXXX00"
name: "Name of value"
percentageOfValuation: 0.4
totalNetAssetValue: 0
}
endAngle: 5.026548245743669
innerRadius: 80
outerRadius: 120
startAngle: 2.5132741228718345
value: 0.4
}
How could I use d3.select()to find a path that holds datum.data.uniqueIDthat is equal to "XX00X0XXXX00"?
我怎样才能d3.select()找到一个datum.data.uniqueID等于“XX00X0XXXX00”的路径？
回答by Lars Kotthoff
You can't do this directly with .select()as that uses DOM selectors. What you can do is select all the candidates and then filter:
您不能直接.select()使用 DOM 选择器执行此操作。您可以做的是选择所有候选人，然后过滤：
d3.selectAll("g")
.filter(function(d) { return d.data.uniqueID === myDatum.data.uniqueID; });
However, it would be much easier to simply assign this ID as an ID to the DOM element and then select based on that:
但是，简单地将此 ID 作为 ID 分配给 DOM 元素，然后根据该 ID 进行选择会容易得多：
var arcs = canvas.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("id", function(d) { return d.data.uniqueID; })
.attr("class", "slice");
d3.select("#" + myDatum.data.uniqueID);
