簡體   English   中英

D3js,在圓(arc)內轉圈,無法使用cx和cy移動內圈

[英]D3js, circle inside a circle (arc), unable to move inner circle using cx and cy

因此,我一直將此代碼用作我嘗試創建的可視化的基礎: https : //bl.ocks.org/kgeorgiou/68f864364f277720252d0329408433ae

這個想法基本上是在節點對應的弧內添加圓。 這就是我希望cxcy將內圓移動到適當位置,然后進行變形以分散它們的方法(變形部分確實起作用)。 但是,每個圓的位置都不會上下移動( cy :()。我知道問題不在於我正在計算的值,因為我還嘗試了通過將不同的值編碼到代碼中來測試不同的值檢查發生了什么,圓仍然不動,我想知道將圓附加到nodeElement對象時是否有問題。

function drawChildrenNodes(nodeElement, centroid, radius, cx, cy, options) {
var childrenNodeColor = getOptionOrDefault('childrenNodeColor', options);   
var innerWidth = getOptionOrDefault('innerWidth', options);

nodeElement.append("circle")
.attr("cx", cx)
.attr("cy", cy)
    .attr("r", radius-25)
    .attr("fill", function (d) {
        return childrenNodeColor;
    })
    .attr("stroke", function (d) {
        return 'black';
    })
    .attr("stroke-width", innerWidth)
   // .attr("transform", function(d) { return "translate(" + centroid + ")"; });

    console.log('hey listen!'+cy)

}

隨附的示例說明了它的外觀。 我需要這些圓基於cycx移動。 如果您發現我在做什么錯,或者您需要更多信息以了解我的問題,請告訴我。 謝謝 !

可視化(網絡圖)

因此,我發現了問題。 它實際上是在繼承父母的立場。 如果檢查index.html,則有一部分在其中設置圓的位置(所有類)。 因此,我將屬性類添加到了子圈子中,現在我只需要添加指定該類的位置即可:

d3.selectAll("circle.children").attr("cx", function (d) {
                        return d.x;
                    })
                    .attr("cy", function (d) {
                        return d.y;
                    });

對不起,噪音。 我還在學習D3js :)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM