2015-11-07 85 views
1

我打算創建一個包含兩列文本的系統。會有一些行指示左側的某些段落與鼠標懸停時出現的右側段落之間的連接。我應該使用d3.js還是爲了這個目的的矯枉過正?我應該用d3.js在文本段落之間畫線嗎?

編輯:要清楚,左側的一些段落可能不與右側的段落對齊,因此在中間會出現橫過對角線。

+0

CSS已經轉換,給你很大的靈活性。 – rby

回答

2

Krzysztof是正確的,因爲您可能想在將來考慮更復雜的交互。如果你真的只需要一條線,那麼D3.js肯定是矯枉過正的。有幾位評論者提出了CSS邊界,但我不知道這種方法是否符合您的需求。如果你想在段落之間繪製直線,大概這些線條不會嚴格水平或垂直。更靈活的選擇是將絕對定位的<div>添加到頁面中,隱藏或適當地顯示它。 <div>可以有一個1px高度和一個背景顏色來模擬一條線,它可以使用平移和旋轉來連接任意兩個任意點。

+0

啊,這就是我正在尋找他們,與轉換的div!謝謝。 – personjerry

1

不,請改用CSS。如果你提供HTML代碼,那麼我們可以用CSS來引導你。查看CSS邊框:http://www.w3schools.com/css/css_border.asp

+0

如果我需要在左側的第5段和右側的第2段之間設置一條線,該怎麼辦? – personjerry

+0

@personjerry然後查看SVG行http://www.w3schools.com/svg/svg_line.asp – Chloe

1

這取決於很多因素。如果你只需要d3.js來繪製「線條/箭頭」,那麼我認爲這是過度的(d3.js比jquery大)。這看起來像使用基本工具的簡單任務。但是,如果這是數據展示,將來可能會更復雜,並且當您將d3用於其他圖表時,它會很好。

編輯:因爲OP編輯: 在語義上看這個。如果這是數據呈現,那麼是的,如果這是圖形效果,那麼沒有。

+1

從數據的意義上說,文本是數據,但不是我認爲隱含的數字數據。所以我想這只是圖形。謝謝! – personjerry

0

編號D3 =「數據驅動文件」。 D3使用SVG,並且爲了繪製一條線而在頁面中添加一個SVG是絕對的矯枉過正。通常,您應該採取最簡單的方法,因此CSS邊框應該可以完成這項工作。例如,

border-bottom: 2px solid red; 

例如。