按其基准选择d3节点

Question

我想在不使用d3.select(this)的情况下选择回调中的节点。

我有一些代码，画一个饼......

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”的路径？

Answer 1

由于使用DOM选择器，因此无法直接使用.select()。你可以做的是选择所有的候选人，然后进行过滤：

d3.selectAll("g") 
    .filter(function(d) { return d.data.uniqueID === myDatum.data.uniqueID; }); 

然而，这将是很容易简单地将此ID指定为ID的DOM元素，然后选择依据是：

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);