內d3.js熱平衡圖的鏈接添加文本

我試圖創建一個熱平衡圖基於在這裏下車所示的例子：https://bost.ocks.org/mike/sankey/內d3.js熱平衡圖的鏈接添加文本

雖然我能夠重新創建圖表，我希望寫的工具提示文本直接鏈接到鏈接本身（因此可以將它們看作靜態圖像）。我試圖添加一個.append("text")調用鏈接，就像我看到的節點，但它似乎並沒有工作。以下是我添加到上面示例中的代碼：

link.append("text") 
    .attr("x", 25) 
    .attr("y", function(d) { return d.dy/2; }) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "end") 
    .attr("transform", null) 
    .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); 
    .attr("text-anchor", "start");

但是，這並不顯示任何圖中的顯示。

UPDATE：我粘貼邁克·博斯托克的代碼放到一個要點，使重建的問題更容易：http://bl.ocks.org/almsuarez/50eab68a645d7fc12183384000ea8c82

來源

2016-04-28 Al S

可你把它放在小提琴？ – echonax

最有可能的罪魁禍首是'link'由'svg.append（「g」）.selectAll（「.link」）''創建，然後有'.append（「path」） .attr（「class」「鏈接」）'。這意味着'link'是'paths'的選擇，並且不能將'text'元素附加到路徑（這是您的代碼所做的）。你需要做的是追加'g'，然後將'path'和'text'加入'g'。 – JSBob

我看到你在說什麼，我已經更新了鏈接的要點，試圖將其考慮在內。但是，現在我不知道如何跟蹤鏈接路徑的x和y位置以正確覆蓋文本。 –

正如你不能文本追加到SVG元素的評論說。所以現在說你將你的鏈接追加到一個容器中。例如：

var link = container.append('path')....//and so on

您必須對文本執行相同操作。因此，例如：

var linkText = container.append('text')

你說你不能跟蹤x和y位置？

基本上，因爲你的鏈接是在兩點之間，你需要找到中心。這裏是我會怎麼做：

.attr("x", function(d) { console.log(d); return d.source.x + (d.target.x - d.source.x)/2; }) 
     .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; })

所以，你得到源」 x位置再加入targetX的差的一半 - sourceX和y的做同樣的。

我已經把這個小提琴給你看：https://jsfiddle.net/thatOneGuy/8ayq5nwa/2/

您可以將鼠標懸停在鏈接查看標題這樣你可以檢查它的正確的:)

來源

2016-04-28 15:09:55 thatOneGuy

如果我理解你correclty，你的意思是使用'svg.append（「g」）.selectAll（「.link」）.data（energy.links）.enter（）'創建一個容器並且鏈接文本和鏈接路徑是那個的子集？這仍然與定位問題有關，因爲sankey.js似乎正在做一些我無法訪問的定位背景。 –

@M_Corn檢查更新的答案:)你已經顯示文本，它只是一個定位它的情況。你可以看到這不是確切的，因爲你需要彌補文本的寬度。但是這不應該太困難:)也是y位置，即所有的文本都在鏈接的頂部。如果你希望將它放在中心位置，你將不得不使用sourceHeight和targetHeight來計算它們的平均中心位置，然後翻譯文本，以便文本在高度上居中，寬度爲 – thatOneGuy

啊，我現在看到了。源數據和目標數據是什麼都逃避我。現在看看我是否可以讓他們隨着鏈接拖動一起移動.... –

內d3.js熱平衡圖的鏈接添加文本

回答

相關問題