使用jQuery和CSS設計d3元素

我有某種技術問題。我想知道是否有可能使用jQuery設計一個d3元素。使用jQuery和CSS設計d3元素

例如，來自d3站點http://www.jasondavies.com/collatz-graph/的「Collatz圖形」示例正在生成具有小標籤的圓形節點。

在這種情況下，數字1,2,3等等。該數字不過是一段代碼，例如

<text dy=".31em" text-anchor="start" transform="rotate(90)translate(8)">32</text>

我如何用jQuery設計這個元素？例如通過點擊添加紅色邊框？

很顯然，我需要在<text ... >類或ID，然後繼續如下：

$(".nome_class").click(function() { 
    $(this).css("border", "3px solid red"); 
});

在我的代碼，無論是D3在工作（我可以看到一個圖）和jQuery的工作（我能爲實例樣式或使用常規HTML元素做其他事情）。但是當我嘗試style d3元素時，我得不到任何結果。

我會非常感謝任何提示或建議。

來源

2015-04-22 nykon

從「css」是動詞開始？ –

要削減長的答案短：不要這樣做！嘗試在SO上搜索[svg][jquery] namespace，以瞭解嘗試使用jQuery來操縱svg時可能遇到的各種問題。儘管圍繞它的方法有很多，但其中大部分都涉及到很多調整，並在純JavaScript中執行，而不涉及jQuery。

jQuery被設計爲處理html，導致處理其他名稱空間像svg時遇到困難。有一些關於jQuery bug跟蹤器的bug報告，但jQuery基金會已經關閉了所有這些bug，並且在撰寫本文時將這些問題列在其Won't Fix頁面上。還有一個關於SO的另一個問題good answer，最近剛剛獲得了一項獎勵，對所涉及的技術問題有了更詳細的瞭解。

我自己結合了jQuery和D3，但根據它們的設計目的分開使用：jQuery用於HTML操作，D3用於處理svgs。

來源

2015-04-22 18:16:46 altocumulus

感謝您提供有用的信息！你能推薦一些我可以用來點擊svg元素後彈出窗體的庫嗎？ – nykon

你也可以用D3來達到這個目的。通過使用d3.select（node）可以訪問html和svg dom。你可以單獨使用D3打開彈出窗口，或者在D3上註冊svg dom節點上的一些處理程序，並讓他們稍後調用jQuery函數。只是不要使用jQuery來處理你的svg的dom。 – altocumulus

爲什麼不使用d3來設置元素的樣式？

d3.select(".nome_class").on('click', function(){ 
    d3.select(this).attr("style", "border: 3px solid red;") 
})

你也可以做.classed或.style

來源

2015-04-22 17:43:42 BDD

是的，你可以，但是目標<svg>元素時，你必須選擇樣式屬性，如stroke and fill。例如，在該網站，如果你打開你的開發工具和粘貼/執行下面，你會看到的變化

$('circle').css('stroke', 'green') 
$('circle').css('fill', 'red')

編輯

每討論，你可以在你<g>元素附加事件處理程序使用jQuery做任何你希望

$('g').click(function(e) { 
    console.log($(this).children().closest('text').text()); 
    // do whatever else 
});

來源

2015-04-22 17:43:49 scniro

正確！我的目標是在用戶點擊圈/文本時使用jQuery UI彈出一些表單。這也是可行的嗎？ – nykon

當然！假設我們正在使用您在問題中提到的網站，請在您的控制檯中運行引用的功能或將其放在您的網頁上。點擊「」並獲取相關數據 - 執行其他任何操作@nykon – scniro

使用jQuery和CSS設計d3元素

回答

相關問題