तो मैं नोड्स, लिंक और अन्य तत्वों की स्थापना के लिए अगले बल लेआउट ग्राफ कोड है:मैं नोड से सभी बच्चों के तत्वों को कैसे हटा सकता हूं और फिर उन्हें अलग-अलग रंग और आकार के साथ फिर से लागू कर सकता हूं?
var setLinks = function()
{
link = visualRoot.selectAll("line.link")
.data(graphData.links)
.enter().append("svg:line")
.attr("class", "link")
.style("stroke-width", function (d) { return nodeStrokeColorDefault; })
.style("stroke", function (d) { return fill(d); })
.attr("x1", function (d) { return d.source.x; })
.attr("y1", function (d) { return d.source.y; })
.attr("x2", function (d) { return d.target.x; })
.attr("y2", function (d) { return d.target.y; });
graphData.links.forEach(function (d)
{
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
};
var setNodes = function()
{
node = visualRoot.selectAll(".node")
.data(graphData.nodes)
.enter().append("g")
.attr("id", function (d) { return d.id; })
.attr("title", function (d) { return d.name; })
.attr("class", "node")
.on("click", function (d, i) { loadAdditionalData(d.userID, this); })
.call(force.drag)
.on("mouseover", fadeNode(.1)).on("mouseout", fadeNode(1));
};
//append the visual element to the node
var appendVisualElementsToNodes = function()
{
node.append("circle")
.attr("id", function (d) { return "circleid_" + d.id; })
.attr("class", "circle")
.attr("cx", function (d) { return 0; })
.attr("cy", function (d) { return 0; })
.attr("r", function (d) { return getNodeSize(d); })
.style("fill", function (d) { return getNodeColor(d); })
.style("stroke", function (d) { return nodeStrokeColorDefault; })
.style("stroke-width", function (d) { return nodeStrokeWidthDefault; });
//context menu:
d3.selectAll(".circle").on("contextmenu", function (data, index)
{
d3.select('#my_custom_menu')
.style('position', 'absolute')
.style('left', d3.event.dx + "px")
.style('top', d3.event.dy + "px")
.style('display', 'block');
d3.event.preventDefault();
});
//d3.select("svg").node().oncontextmenu = function(){return false;};
node.append("image")
.attr("class", "image")
.attr("xlink:href", function (d) { return d.profile_image_url; })//"Images/twitterimage_2.png"
.attr("x", -12)
.attr("y", -12)
.attr("width", 24)
.attr("height", 24);
node.append("svg:title")
.text(function (d) { return d.name + "\n" + d.description; });
};
अब, रंग और आकार निर्भरता बदल गया है और मैं साथ ग्राफ हलकों (+ सभी संलग्न तत्वों) पुनः बनाने की जरूरत है अलग रंग और त्रिज्या। इसके साथ समस्या हो रही है।
मैं यह कर सकता:
visualRoot.selectAll(".circle").remove();
लेकिन मैं सभी छवियों है कि मैं अभी भी वहाँ '.circles'
से जुड़ी है।
किसी भी तरह से, किसी भी मदद की सराहना की जाएगी, मुझे बताएं कि क्या स्पष्टीकरण पर्याप्त स्पष्ट नहीं है, मैं इसे ठीक करने की कोशिश करूंगा।
पीएस graphData.nodes
और d3.selectAll('.nodes')
के बीच क्या अंतर है?
दुर्भाग्य से .html ("") सफारी में काम नहीं करता है। अन्य सभी ब्राउज़रों में ठीक से काम करता है। – glyph
@glyph: ऐसा करने के आधिकारिक तरीके के लिए http://stackoverflow.com/a/43661877/1587329 देखें –