I tried to sort it out by looking at many similar questions, but no one could solve it. I want to create a force-guided graph using this form of data from JSON-File:
{"nodes": [{"name": "A", "imagelink": "Url-to-img", "shape-type": circle}, {"name": "b", "imagelink": "url-to-img", "shape-type": rectangle}, {"name "": "{{" Source ": 1," target ": 0," value ":" "", "imagery": "url-to-img", "shape-type": triangle}] "link" :, "Value": 1, "value": 1, "value": 1}, {"source": 2, "target": 0, "value": 1}]}
/ Pre>Graph nodes should be a group that includes a geometric shape ("shape-type" Is defined) in which an image is included (defined by "impecclink").
This is the original force-layout code I have used:
var width = 960, height = 500; Var force = D3 layout. Force (). Charge (-1000) .Link Extension (150). Size ([width, height]); var svg = d3.select ("body") Attachments ("SVG"); d3.json ("json-file.json"); Force.Node (graph.nodes). Link (graph.links) .start (); var link = svg.selectAll (". Link ") .data (graph.links) .enter () Append ("line") .attr ("class", "link"). Style ("stroke-width", function (D) {return mathematics SQL (D. value);}); Var node = svg.selectAll (".node") .data (graph.nodes) .enter (). Annexe ("g") .attr ("class", "node"). Call (force.drag); To include an image in size I have used the "clip-path method" (for example circle):
node.epend ("circle") (. "R" , 20) .attr ("cy", 0) .attr ("cx", 0). Style ("Fill", "White"). Style ("stroke", "black") style ("stroke width", "2"); Var clippath = node.append ('clippath'). Etter (function (d) {return ("clip-" + convert-sip (dgroup))}); Clippath.append ("circle") .attr ("r", 19) .attr ("cy", 0) .attr ("cx", 0); . ("Height", 75) .attr ("width", 75) .attr ("x", -37.5) .attr ("y", -37.5) .attr ("image") .attr ("Xlink: href ", Function (d) {return (d.Igeelink)} .attr (" clip-path ", function (d) {returns (" url (# clip- "+ d.shapetype) +") ")});
As you can see, my problem is that the append () - function is data-dependent. So how can I understand this?
Thank you.
No comments:
Post a Comment