翻譯後找到幾個圓圈新cx，cy

Question

所以我有兩個圓圈，sustainabilityCircle和一個被this當前引用。我在申請轉換到兩個圓的，像這樣：

d3.select(this).transition() 
    .duration(750) 
    .attr("transform", "translate(" + d3.select(this).attr("originX") + "," + d3.select(this).attr("originY") + ")scale(" + scaler + ")translate(" + -d3.select(this).attr("cx") + "," + -d3.select(this).attr("cy") + ")") 
    .style("stroke-width", 1.5/scaler + "px"); 

    sustainableCircle.transition() 
    .duration(750) 
    .attr("transform", "translate(" + -.6*sustainableCircle.attr("cx") + "," + -.6*sustainableCircle.attr("cy") + ")scale(" + .3*scaler + ")") 

現在我試圖創建始於this圓的中心點的線，並在sustainableCircle的中心點結束。很明顯，因爲我們已經做了翻譯，下面的代碼無法正常工作：

 var newCLine = svg.append("line").attr({ 
     x1: d3.select(currentCircle).attr("cx"), 
     y1: d3.select(currentCircle).attr("cy"), 
     x2: sustainableCircle.attr("cx"), 
     y2: sustainableCircle.attr("cy"), 
     opacity: 1, 
     stroke: "black" 
     }); 

什麼我需要做的訪問我的社交圈的新cx和cy位置？作爲參考，我正在使用d3 v3.5.17

Answer 1

我建議不要設置設置cx/cy屬性，然後translating圓圈以及。只需使用一種設置位置的方法來簡化您在路上的生活。

這就是說，你正在尋找的應該只是位置：

var cc = d3.select(currentCircle), 
    cc_trans = d3.transform(cc.attr("transform")), 
    cc_x = +cc.attr('cx') + trans.translate[0], 
    cc_y = +cc.attr('cy') + trans.translate[1], 
    sc_trans = d3.transform(sustainableCircle.attr("transform")), 
    sc_x = +sustainableCircle.attr('cx') + sc_trans.translate[0], 
    sc_y = +sustainableCircle.attr('cy') + sc_trans.translate[1]; 

var newCLine = svg.append("line").attr({ 
    x1: cc_x, 
    y1: cc_y, 
    x2: sc_x, 
    y2: sc_y, 
    opacity: 1, 
    stroke: "black" 
    });