增加D3圖中邊緣的可點擊面積

我有一張由d3製作的圖形，dagre-d3坐在它的頂部，用於繪製有向圖。這給了我什麼，我期待渲染圖：增加D3圖中邊緣的可點擊面積

enter image description here

編輯數據構建圖形，每個元素是可點擊的。這對於邊緣使用標籤進行渲染的情況很好，但它們並不總是有標籤，導致未標記的邊緣很難點擊進行編輯。分配給邊緣，這些風格是：

#visitGraph .edgePath { 
    cursor: pointer; 
    stroke: #333; 
    stroke-width: 2px; 
    fill: none; 
    padding: 10px; 
}

渲染SVG是：

<g class="edgePath enter"> 
    <path marker-end="url(#arrowhead)" d="M198.5,121L198,124.9C198.4,128.8,198.4,136.6,198.4,144.5C198.4,152.3,198.4,160.1,198.4,164.0L198.5,168" style="opacity: 1"> 
    </path> 
</g>

在不改變代碼dagre-D3添加過畫的線條，就像我在見過其他SVG建議，我可以做些什麼來增加可點擊這些元素的區域？我已經試過padding，margin，以及pointer-events這個風格的各種值無濟於事。

來源

2014-06-12 Matt Sieker

你可能會增加中風的寬度。這將使線條變寬。 –

我曾嘗試過，但當時邊緣很容易點擊，看起來相當難看。 –

我能看到的唯一選擇就是擁有某種不可見的虛擬元素，但更大的處理點擊次數。 –

它看起來像<path>元素沒有fill。您能否將fill: none更改爲fill: white或fill: transparent以使整個區域可點擊？

來源

2015-10-28 22:49:57

這就是我的做法，我很肯定它也可以使用path。

<g> 
    <line class="clickable-area" stroke="transparent" stroke-width="5" x1="0" y1="0" x2="1" y2="1"></line> 
    <line class="visible-edge" stroke="red" stroke-width="0.5" x1="0" y1="0" x2="1" y2="1"></line> 
</g>

正如你可以看到，有一個較大的stroke-width值的虛設邊緣，我把原來的邊緣元素。

來源

2015-11-27 08:46:53

我結束了使用標籤，使它更容易點擊。我使用了令人敬畏的字體，讓它看起來更有趣。

g.setEdge(node1.uuid, node2.uuid, { 
 
    labelType: "html", 
 
    label: "<span class='fa fa-2x fa-info-circle'/>", 
 
    style: getStyleForEdge(node1, node2), 
 
    arrowheadStyle: getArrowForStyle(node1,node2) 
 
});

//inner is the graph element 
inner.selectAll("g.edgeLabel").on("click", function(id) { 
    selectEdge(id); 
});

來源

2017-01-05 19:32:34

增加D3圖中邊緣的可點擊面積

回答

相關問題