按其基準選擇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);