해당 데이터로 d3 노드 선택

Question

d3.select(this)을 사용하지 않고 콜백 노드를 선택하고 싶습니다.

나는 당신은 내가 divergeSlice()에 대한 호출이 말에 알 수 있습니다 파이를 그립니다 몇 가지 코드 ...

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

있습니다. 이 작품

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를 사용하지 않고이 작업을 수행하고 싶습니다 : 그것은 다음과 같습니다.

{ 
    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 
} 

어떻게가 "XX00X0XXXX00"동일 datum.data.uniqueID을 보유하고 경로를 찾을 d3.select()을 사용할 수 있습니다 : 나는 datum 객체를 로그인 할 때, 나는 다음과 같은 일을 얻을?

Answer 1

.select()은 DOM 선택기를 사용하므로이 작업을 직접 수행 할 수 없습니다. 단순히 그 기반으로 DOM 요소에 ID로이 ID를 할당 한 후 선택하는 것이 훨씬 쉬울 것,

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

을하지만 : 당신이 할 수있는 것은 필터링 모든 후보를 선택하고있다

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