Zeichnen von Linien Schnapp SVG using JSON Object Array

Question

Ich habe folgende JSON Objekte innerhalb eines Arrays, dh

[{ "rec": "1", "region": "LEFT", "intrface": "Line-1" },{ "rec": "1", "region": "LEFT", "intrface": "Line-2" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-3" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-4" }] 

Basierend auf Bereichswert, muss ich durch jede dieser JSON Objekten innerhalb des Arrays iterieren und Zeichnen unter Verwendung von Snap SVG, Linien auf der linken Seite eines Bildes sowie als Linien auf der rechten Seite eines Bildes mit den beiden Werten "region" und "intrface" im obigen JSON.

In der Hoffnung, dass dies Sinn macht, also wenn ich diese SVG-Linien zeichne, muss ich auch über jeder dieser SVG-Linien, die Werte für "intrface" wie eine Beschriftung/Text, als Iteration jedes JSON-Objekt.

Nur um das Aussehen zu unterstützen, nehme ich an, dass ich die Eingänge (Line-1 und Line-2) auf einen Server (mein Bild in der Mitte) und die Ausgänge nach rechts ziehe des Servers (Zeile-3 und Zeile-4).

Einige der Code, den ich habe, ist die folgende:

var my_data = '{ "rec": "1", "region": "LEFT", "intrface": "Line-1" },{ "rec": "1", "region": "LEFT", "intrface": "Line-2" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-3" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-4" }'; 

var jsonObj = JSON.parse('[' + my_data + ']'); 

jsonObj.forEach(function(item,i){ 
    console.log(item.region + ' - ' + item.intrface); 
}); 

Jede Hilfe zu diesem snapsvg würde geschätzt unter Verwendung der Einrichtung.

Danke.

Answer 1

Snap nimmt etwas Wissen über Svg. Sie müssen nur Svg-Elemente erstellen und sie mit der Methode attr formatieren.

Grundsätzlich werden Sie line, text und rect Elemente verwenden.

Die API ist ziemlich einfach.

Um die Füllfarbe des Elements zu ändern, verwenden Sie das Füllattribut und für die Strichfarbe das Strichattribut.

Was Link, ich nicht ganz sicher, wie das zu tun, aber man kann immer Click-Ereignis zu jedem Elemente hinzufügen und dann Seite umleiten zu einem gewissen URL:

window.location.href = 'http://example.com'; 

Hier Codebeispiel ist, wie zu tun was du willst.

const data = [{ "rec": "1", "region": "LEFT", "intrface": "Line-1" },{ "rec": "1", "region": "LEFT", "intrface": "Line-2" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-3" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-4" }]; 

const s = Snap("#svg"); 
const height = 40; 
const canvasWidth = 400; 
const lineWidth = 180; 
const rightOffset = canvasWidth/2 - lineWidth; 

const leftLines = data.filter((line) => !isRightLine(line)); 
const rightLines = data.filter(isRightLine); 

leftLines.forEach(drawLine); 
rightLines.forEach(drawLine); 

const numberOfLines = Math.max(leftLines.length, rightLines.length); 
const rectSize = 20; 
const rectangles = []; 

for (let i = 0; i < numberOfLines; i++) { 
    rectangles.push(drawRect(i)); 
} 

function drawLine(data, index) { 
    const {intrface} = data; 
    const isRight = isRightLine(data); 
    const x = isRight ? canvasWidth/2 + rightOffset : 0; 
    const y = height * (index + 1); 
    const stroke = isRight ? 'red' : 'black'; 

    const line = s.line(x, y, x + 180, y); 
    line.attr({ 
    stroke, 
    strokeWidth: 1 
    }); 

    const text = s.text(x + 10, y - 5, intrface); 

    text.attr({ 
    fill: stroke, 
    cursor: 'pointer' 
    }); 

    text.click(() => { 
    console.log('clicked', data); 

    //window.location.href = "http://stackoverflow.com/"; 
    }); 
} 

function isRightLine({region}) { 
    return region === 'RIGHT'; 
} 

function drawRect(index) { 
    const x = canvasWidth/2 - rectSize/2; 
    const y = height * (index + 1) - rectSize/2; 
    const rectangle = s.rect(x, y, rectSize, rectSize); 

    rectangle.attr({ 
    fill: 'black' 
    }); 

    console.log('rr', x, y); 

    return rectangle; 
} 

Codepen: http://codepen.io/sielakos/pen/eZwrMj