應用樣式后出現意外的黑色背景：“stroke: blue; stroke-width: 2px;”

[英]Getting unexpected black background after applying style:"stroke: blue; stroke-width: 2px;"

我是 reactJS 的新手，我一直在嘗試使用 DagreGraph 創建一個響應圖。 我學會了理解如何創建圖表所需的最小反應。 這是我的代碼，它給出了在兩個節點之間創建的邊緣的錯誤。 這是我在反應中使用“dagre-d3-react”中的 DagreGraph 創建 3 個節點的代碼。 我無法 ...

在 vue2 中使用 dagre-d3 時掛載鈎子錯誤：“TypeError: edge is undefined”

[英]Error in mounted hook: "TypeError: edge is undefined" when using dagre-d3 with vue2

我正在嘗試使用dagre-d3為Vue2設置非常簡單的示例來渲染有向圖。 不幸的是，即使是極其簡單的例子，它也行不通。 在網上其他地方找到的例子是使用舊版本的d3 。 目前， Vue2應用程序大多是默認模板，帶有以typescript為語言的路由器。 Diagram組件在javascript （由 ...

使用 d3 或 cytoscape 渲染家譜

[英]Rendering a family tree with d3 or cytoscape

我在使用 Javascript 生成漂亮的家譜時遇到問題。 要求： 每個孩子都應該連接到樹中的兩個父母，而不是像某些圖表中的一個我希望配偶在樹上彼此相鄰（垂直位置相同） 我想把節點按世代垂直排列，讓你一眼就能看到同一個年代出生的人。 隨着時間的推移，一個人可以有多個配偶，並且每個人都有孩子父母和孩子 ...

位置相對在 Safari 11 Dagre-d3 svg 中不起作用

[英]Position relative is not working in Safari 11 Dagre-d3 svg

我試圖將HTML標簽中dagre-D3 SVG圖形，它做工精細這里在Firefox和Chrome，但將位置作為自定義HTML相對或絕對的時候似乎問題在Safari。 這是我的CSS： HTML： 鉻輸出： Safari 中的問題： 謝謝 ...

dagre-d3 鏈接和標簽未出現在 angular 項目中

[英]dagre-d3 links and labels are not appearing in angular project

我正在角度研究 dagre-d3。 並且卡在了中間。 問題： 節點之間沒有出現鏈接。 節點上的標簽不可見。 https://codesandbox.io/s/angular-graph-kq2nb 我已經瀏覽了一些與此相關的帖子，但無法找到我遺漏的內容。 任何幫助表示贊賞。 ...

如何將 jointjs 圖形與紙張的中心/中間水平對齊，流向從上到下？

[英]How to align the jointjs graph to the center / middle of the paper horizontally with the flow direction from top to bottom?

我有一個使用 JointJs 生成的圖形，它使用 jointjs 提供的 Dagre 布局。 目前，圖表從上到下對齊，這是正確的方式，但完整的圖表會與紙張的左側對齊。 我需要圖表在紙的中間水平對齊。 當前使用的配置是這樣的： 我看到使圖形從上到下流動的選項被賦予rankDir: "TB" 。 是否 ...

如何在 D3/dagre-D3/javascript 中創建決策樹/流程圖？

[英]How to create a decision tree / flow chart in D3/dagre-D3/javascript?

所以我想創建一個如下的問題流程圖： 不確定從哪里開始最好......這是有向圖嗎？ 其中一些最終真的被隔開並且看起來不太適合像這樣的“流”： https : //observablehq.com/@d3/force-directed-graph 我見過的最好的例子是一個非 D3 庫（yworks ...

使用dagre / dagre-d3 / d3.js懸停效果

[英]hover effects with dagre / dagre-d3 / d3.js

這是我的第一篇文章，希望有人可以幫我解決這個問題。 您在jsfiddle示例中看到的內容是使用我正在使用的工具制作的。 節點和邊（鏈接）的所有定義都是由我們的工具生成的（“ VAR STATES = ..”和“ g.setEdge”等。）（工具提示在這里不起作用，請忽略） 在選擇“ ...

修復IE11中的DagreD3邊緣箭頭填充

[英]Fix DagreD3 edge arrowhead fill in IE11

DagreD3提供了出色的圖形網絡布局，並集成了D3以進行顯示，但是邊緣箭頭在舊的Web瀏覽器（例如IE11）中無法正確顯示。 箭頭標記在IE11中顯示，沒有填充顏色。 當使用IE11查看時，可以通過DagreD3樣式演示看到這一點。 缺少填充的箭頭用紅色圈出。 ...

dagre-d3-使長文本適合節點內部

[英]dagre-d3- make the long text to fit inside node

在setNode中，我們也可以指定html。 如果我提到寬度和高度，並且如果它是長文本，那么它正在移開。 我試着給寬度到div，但它不工作樣本小提琴 如何使文本適合節點內部？ ...

更改SVG內容時是否保留d3縮放狀態？

[英]Preserve d3 zoom state when changing out SVG contents?

我正在使用d3渲染某些內容，並使用d3.zoom進行鼠標縮放。 它可以工作，但是我還需要定期更改svg的內容（執行完整的$('svg').html($('svg').html())調用，因為我的SVG包含HTML）。 問題是當我這樣做時，我失去了縮放狀態。 我試圖通過存儲縮放變換並在更 ...

在dagre-d3中拖動節點時缺少結束箭頭

[英]End arrow is missing while dragging node in dagre-d3

我有一個簡單的圖，父節點是多邊形，子節點是矩形。 這兩個節點之間有一條邊。 這里的問題是，一旦我們拖動任何節點，連接到多邊形的末端箭頭就會丟失。 誰能幫我找出為什么該末端箭頭丟失的原因。 注釋中提供了樣本小提琴。 ...

在節點外部添加Dagre D3注釋或描述符

[英]add Dagre D3 note or descriptor outside of node

有沒有一種簡單的方法可將注釋或描述符添加到節點？ 那么節點標簽在節點中，但是輔助描述符在節點上方還是下方？ 我在想可能需要創建節點，然后在其上循環並嘗試添加描述符，但是我想我是否可以找到一種更簡單的方法。 編輯：最終做了類似凱特·吉恩（KateJean）回答的事情。 使用標簽創 ...

圖表沒有渲染 - Dagre-d3

[英]Diagram is not rendering - Dagre-d3

我將這個Dagre-D3演示轉換為React組件。 我使用的代碼如下所示： 當我執行此代碼段時，不會生成圖表。 此外，控制台中也沒有錯誤。 我找不出原因。 有什么想法有什么不對？ ...

為什么在動態添加的D3節點上的點擊事件沒有觸發？

[英]Why is my click event on my dynamically added D3 node not firing?

我的代碼通過用戶動態添加了一個節點，以創建一個有向圖。 我的問題是添加節點后，我的點擊事件沒有被觸發： 如果我在添加節點后嘗試在控制台中運行這段代碼，則會觸發click事件，並且該節點會更改顏色，但它本身無法在瀏覽器中正常工作。 據我了解，我應該在加載圖表后運行我的click ...

在帶有觀看模式的vuejs2上使用時，dagre-d3中的縮放問題

[英]zoom issue in dagre-d3 when use with vuejs2 with watch mode

我正在使用d3-dagre渲染數據。 最初，我可以毫無問題地呈現數據。 當我嘗試在監視模式下更新同一視圖時，它正在更新數據，但在控制台中仍會為“ g”屬性轉換引發一些錯誤。 每當我嘗試重寫SVG元素時，我都會刪除“ svg”標簽內的“ g”元素。 我正在vuejs2 ui庫中嘗試此操作。 ...

Vue.js方法不觸發

[英]Vuejs methods not firing

當我從jquery選擇器中調用vuejs函數時，它沒有觸發。 我已經在Vue組件中集成了d3-dagre圖表。 當我為節點設置點擊動作時，不會觸發vuejs方法。 在下面的getJobid（）中不觸發。 找到下面的vue組件代碼，最后也出錯。 Vue組件： 錯誤： ...

vuejs + dagre-d3工具提示問題

[英]vuejs + dagre-d3 tooltip issue

我正在嘗試將以下圖表（dagre-d3）集成到我的vuejs應用程序中。 我已經能夠在vuejs組件內部成功生成圖形。 但是我無法實現圖中提供的工具提示功能。 他們正在使用一個名為Tipsy的庫，當我以純HTML格式運行圖形時，效果很好。 但是當我在vue應用程序中使用它時，拋出以 ...

防止dagre-d3中的箭頭交叉

[英]Prevent crossing of arrows in dagre-d3

我最近開始使用dagre-d3，發現它很整潔，直到需要做更大的圖形為止。 ：該算法導致這些種情況在這里形象 如上所示，兩個節點應通過兩個箭頭連接。 但是，Dagre的算法決定將它們交叉，使圖變得一團糟。 關於如何預防的任何想法？ ...

從匿名函數內部設置d3圖

[英]setting d3 graph from inside of an anonymous function

我正在嘗試讀取如下所示的JSON文件： 然后，我遍歷內容並從data.forEach函數調用（下面的代碼）內部設置Node和Edges 但是，當我遍歷變量g ，似乎變量g並未設置。 如果我在匿名函數之外執行此操作，則它將起作用。 我想念什么？ ...