![]() XHost |
Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink |
SVGs also work well with frontend libraries. Here I’m using React to generate a data-driven diagram. Here I’m both generating a list of rectangles to create a column diagram based on some data and I also generate a series of coordinates for a polyline.
For simple use cases, you can code your own diagram like this. But if you need more complex diagrams then check out the D3 library. The D3 library uses SVG under to hood to create all sorts of diagrams.
`, sourceCodes: [{ type: "JavaScript", content: `function Diagram() { const dataPoints = [3, 4, 7, 5, 3, 6]; const sineWave = Array.from({ length: 115 }) .map((item, index) => \`\${index - 55},\${Math.sin(index / 20) * 20 + 10}\`) .join(" "); return ( ); }` }] }); detailScreens.push({ title: "Multi-component snow globe", description: `If you really got into SVGs and you got one where the code got a bit out of hand then you can break it down into components. Here I’m using React again, but the same things apply for Vue.JS. Mind though that there’s only one SVG tag at the root of the component as there's still only one image. The child components have their content in group elements.`, sourceCodes: [{ type: "JavaScript", content: `function SnowGlobe() { return ( ); } function Threes() { return (