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 });
謝謝。
謝謝@Vilx。我會嘗試你的建議,並會回報。 – dpdragnev