Javascript 根据其基准选择d3节点
我想在回调中选择一个节点,而不使用Javascript 根据其基准选择d3节点,javascript,d3.js,Javascript,D3.js,我想在回调中选择一个节点,而不使用d3。选择(此) 我有一些代码可以画一个饼 function drawPie(options) { options || (options = {}); var data = options.data || [], element = options.element, radius = options.radius || 100, xOffset = Math.floor(parseInt(d3.select(elem
d3。选择(此)
我有一些代码可以画一个饼
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);
您会注意到,最后我调用了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
来实现这一点。当我记录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
}
我如何使用
d3.select()
来查找包含datum.data.uniqueID
的路径,该路径等于“XX00X0XXXX00”您不能直接使用.select()
,因为它使用DOM选择器。您可以选择所有候选人,然后筛选:
d3.selectAll("g")
.filter(function(d) { return d.data.uniqueID === myDatum.data.uniqueID; });
但是,简单地将此ID指定为DOM元素的ID,然后根据该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);
这是有道理的。谢谢你的解释!