2017-04-21 46 views
0

我是新來放大圖(網圖),我有幾個問題:ZoomCharts拖放

  • 我希望能夠拖動一個節點,當用戶刪除它,處理事件。有沒有辦法做到這一點?我正在查看onPositionChange事件,但該事件在拖動過程中會多次觸發。沒有辦法知道用戶何時實際放棄節點。至少我沒有找到一種方法來確定這一點。也許我錯過了一些東西。
  • 我有一個項目列表,我希望能夠拖入圖表並將其轉換爲節點。這工作正常,但是當我使用dragend(外部項目)事件時,我無法正確設置新創建的節點的x和y定位。我嘗試使用ClientX和ClientY,LayerX和LayerY以及由DragEnd事件參數提供的其他座標,但是它們都沒有放置釋放遊標的節點。什麼是完成這個最好的方法?

這裏是我的圖表定義:

this.chart = new ZoomCharts.NetChart({ 
 
\t \t \t container: chartContainer, 
 
\t \t \t area: { 
 
\t \t \t \t height: null, 
 
\t \t \t \t style: { fillColor: "rgba(14,33,40,0.9)" } 
 
\t \t \t }, 
 
\t \t \t data: { 
 
\t \t \t \t preloaded: { 
 
\t \t \t \t \t "nodes": this.nodes, 
 
\t \t \t \t \t "links": this.links 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t events: { 
 
\t \t \t \t onRightClick: function (event: any, args: any) { 
 
\t \t \t \t \t //set up the customer context menu 
 
\t \t \t \t \t event.preventDefault(); 
 
\t \t \t \t }, 
 
\t \t \t \t onHoverChange: function (event: any, args: any) { 
 
\t \t \t \t \t var content = ""; 
 
\t \t \t \t \t if (args.hoverNode) { 
 
\t \t \t \t \t \t content = args.hoverNode.data.description; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t infoElementVisible = !!content; 
 
\t \t \t \t \t infoElement.innerHTML = content; 
 
\t \t \t \t \t //delay the showing 
 
\t \t \t \t \t if (infoElementVisible) { 
 
\t \t \t \t \t \t setTimeout(() => { 
 
\t \t \t \t \t \t \t infoElement.style.display = infoElementVisible ? "block" : "none"; 
 
\t \t \t \t \t \t }, 1000); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t infoElement.style.display = infoElementVisible ? "block" : "none"; 
 
\t \t \t \t \t } \t \t \t 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t style: { 
 
\t \t \t \t nodeStyleFunction: function (node: any) { 
 
\t \t \t \t \t if (node.selected) { 
 
\t \t \t \t \t \t node.lineColor = "yellow"; 
 
\t \t \t \t \t \t node.lineWidth = 3; 
 
\t \t \t \t \t \t node.radius = node.radius * 1.5; 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t node.lineColor = null; 
 
\t \t \t \t \t \t node.lineWidth = 0; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t node.userLock = true; 
 
\t \t \t \t \t node.label = node.data.name; 
 
\t \t \t \t \t if (node.data.auras == "Selection GNQ") { 
 
\t \t \t \t \t \t node.fillColor = "darkorange"; 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t node.fillColor = "cyan"; 
 
\t \t \t \t \t } 
 
\t \t \t \t }, 
 
\t \t \t \t linkStyleFunction: function (link: any) { 
 
\t \t \t \t \t link.fromDecoration = "circle"; 
 
\t \t \t \t \t link.toDecoration = "arrow"; 
 
\t \t \t \t \t link.radius = 5; 
 
\t \t \t \t }, 
 
\t \t \t \t node: { 
 
\t \t \t \t \t radius: 50, 
 
\t \t \t \t \t imageCropping: true, 
 
\t \t \t \t \t shadowBlur: 15, 
 
\t \t \t \t \t shadowColor: "#262626", 
 
\t \t \t \t \t fillColor: "rgba(44,233,233,0.8)" 
 
\t \t \t \t }, 
 
\t \t \t \t nodeHovered: { 
 
\t \t \t \t \t shadowColor: "white", 
 
\t \t \t \t \t shadowBlur: 15, 
 
\t \t \t \t }, 
 
\t \t \t \t nodeLabelScaleBase: 25, 
 
\t \t \t \t nodeSelected: { 
 
\t \t \t \t \t lineColor: null 
 
\t \t \t \t }, 
 
\t \t \t \t selection: { 
 
\t \t \t \t \t fillColor: null, 
 
\t \t \t \t \t lineColor: null 
 
\t \t \t \t }, 
 
\t \t \t \t nodeFocused: { 
 
\t \t \t \t \t shadowColor: "yellow", 
 
\t \t \t \t \t shadowBlur: 15 
 
\t \t \t \t }, 
 
\t \t \t \t nodeLabel: { 
 
\t \t \t \t \t textStyle: { font: '24px Arial' } 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t theme: ZoomCharts.NetChart.themes.dark, 
 
\t \t \t layout: { 
 
\t \t \t \t mode: 'static', 
 
\t \t \t \t nodeSpacing: 100 
 
\t \t \t } 
 
\t \t });

謝謝。

回答

1

@dpdragnev!我來自ZoomCharts,所以這是一個權威的答案。 :)

  1. 是的,你是對的,我們沒有辦法說。嗯...我可以想到一個黑客去那裏,但我從來沒有嘗試過,所以...將事件處理程序附加到NetChart的容器元素。將它們附加到pointerup,pointercancel,mouseup,touchend,touchcancel,MSPointerUp,MSPointerCancel。這些都是會中斷拖動操作的事件。你可能需要檢查哪些是可用的,只附加到那些。您需要附加到capture階段,因爲NetChart會防止冒泡。然後附加到NetChart的事件onPositionChange,以查看節點拖動何時開始。在onPositoinChange事件中檢查鼠標事件的identifier字段。這將告訴你哪個指針是拖動的(對於多點觸摸支持很重要)。所以,現在當一個節點被拖動時,你有一個事件,一個節點被釋放時的事件,以及與它匹配的指針標識符。應該工作,我想。
  2. 再次,沒有好方法,對不起。但是我們已經使用了自己的黑客技術。通過查看NetChart對象的._impl.scene.centerX._impl.scene.centerY屬性,可以在場景座標中獲取圖表中心的x/y座標。縮放可以通過調用.zoom() API調用完全合法獲得。添加一些數學,你可以找出你的鼠標光標的場景座標。把你的節點放在那裏。 請注意,這不是一個記錄的方法,可以隨時停止工作。使用需要您自擔風險。
+0

謝謝@Vilx。我會嘗試你的建議,並會回報。 – dpdragnev