আমি কীভাবে সমস্ত বাচ্চাদের উপাদানগুলি নোড থেকে সরিয়ে ফেলি এবং তারপরে আবার তাদের বিভিন্ন রঙ এবং আকার দিয়ে প্রয়োগ করব?

Question 1

নোড, লিঙ্ক এবং অন্যান্য উপাদানগুলি সেট করার জন্য আমার কাছে পরবর্তী বলের বিন্যাস গ্রাফ কোড রয়েছে:

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')?

Question 2

আপনার উত্তর কাজ করবে, তবে উত্তরোত্তর জন্য, এই পদ্ধতিগুলি আরও জেনেরিক।

এইচটিএমএল থেকে সমস্ত শিশুদের সরান:

d3.select("div.parent").html("");

এসভিজি / এইচটিএমএল থেকে সমস্ত শিশুদের সরান:

d3.select("g.parent").selectAll("*").remove();

.html("")কল আমার করা SVG সাথে কাজ করে, কিন্তু এটা ব্যবহার করার একটি পার্শ্ব প্রতিক্রিয়া হতে পারে innerSVG ।

Question 3

আমার প্রথম পরামর্শটি হ'ল d3.jsনির্বাচনের বিষয়ে আপনার এপিআইটি পড়া উচিত : https://github.com/mbostock/d3/wiki/Seferences

enter()কমান্ডটি কীভাবে কাজ করে তা আপনাকে বুঝতে হবে ( এপিআই )। নতুন নোডগুলি পরিচালনা করতে আপনাকে এটি ব্যবহার করতে হবে তার সত্যতা একটি অর্থ যা আপনাকে সাহায্য করবে।

আপনি মোকাবেলা করার সময় এখানে প্রাথমিক প্রক্রিয়াটি রয়েছে selection.data():

প্রথমে আপনি নির্বাচনের সাথে কিছু ডেটা "সংযুক্ত" করতে চান। সুতরাং তোমার আছে:
```
  var nodes = visualRoot.selectAll(".node")
      .data(graphData.nodes)
```
তারপরে আপনি প্রতিবার ডেটা পরিবর্তিত হয়ে সমস্ত নোডকে সংশোধন করতে পারবেন (এটি আপনি যা চান ঠিক তা করবে)। উদাহরণস্বরূপ, আপনি পুরানো নোডের ব্যাসার্ধটি পরিবর্তন করেন যা আপনি লোড করেছেন এমন নতুন ডেটাশেটে রয়েছে
```
  nodes.attr("r", function(d){return d.radius})
```
তারপরে, আপনাকে নতুন নোডগুলি পরিচালনা করতে হবে, এর জন্য আপনাকে নতুন নোডগুলি নির্বাচন করতে হবে, এটি এ selection.enter()জন্য তৈরি করা হয়েছে:
```
  var nodesEnter = nodes.enter()
      .attr("fill", "red")
      .attr("r", function(d){return d.radius})
```
অবশেষে আপনি অবশ্যই নোডগুলি অপসারণ করতে চান যা আপনি আর চান না, এটি করার জন্য, আপনাকে সেগুলি নির্বাচন করতে হবে, selection.exit()এটি এটির জন্য তৈরি।
```
  var nodesRemove = nodes.exit().remove()
```

পুরো প্রক্রিয়াটির একটি ভাল উদাহরণ এপিআই উইকিতেও পাওয়া যাবে: https://github.com/mbostock/d3/wiki/Se लेक्शन#wiki- exit

Question 4

এইভাবে, আমি এটি খুব সহজেই সমাধান করেছি,

visualRoot.selectAll(".circle").remove();
visualRoot.selectAll(".image").remove();

এবং তারপরে আমি কেবল ভিজ্যুয়াল উপাদানগুলি পুনরায় যুক্ত করেছি যা ভিন্নভাবে উপস্থাপিত হয়েছিল কারণ ব্যাসার্ধ এবং রঙ গণনার কোডটি বৈশিষ্ট্য পরিবর্তন করেছিল। ধন্যবাদ.

Question 5

আপনি যদি উপাদানটি নিজেই সরাতে চান তবে আপনি element.remove()যেমন করেন তেমন ব্যবহার করুন । আপনি যদি কেবলমাত্র উপাদানটির সামগ্রীটি সরাতে চান তবে উপাদানটিকে যেমন আছেন তেমন রাখুন, আপনি f.ex ব্যবহার করতে পারেন।

visualRoot.selectAll(".circle").html(null);
visualRoot.selectAll(".image").html(null);

পরিবর্তে .html("")(কোন উপাদানটির বাচ্চারা আপনি মুছতে চান তা আমি নিশ্চিত ছিলাম না)। এটি উপাদানটিকে নিজেই রাখে তবে সমস্ত অন্তর্ভুক্ত সামগ্রী পরিষ্কার করে । এটি করার আনুষ্ঠানিক উপায় , তাই ক্রস ব্রাউজারে কাজ করা উচিত।

PS: আপনি বৃত্তের আকার পরিবর্তন করতে চেয়েছিলেন। আপনি চেষ্টা করেছেন?

d3.selectAll(".circle").attr("r", newValue);

Question 6

নোড থেকে সমস্ত উপাদান সরাতে:

var siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
    for (var j = 0; j < siblings.length; j++) {
        siblings[i].parentElement.removeChild(siblings[j]);
    }
}`