আমি কীভাবে এসভিজি বিষয়বস্তু সরিয়ে বা প্রতিস্থাপন করতে পারি?

Question

আমার কাছে জাভাস্ক্রিপ্ট কোডের একটি টুকরা svgরয়েছে যা একটি উপাদান তৈরি করে (D3.js ব্যবহার করে) যা একটি চার্ট রয়েছে। আমি এজেএক্স ব্যবহার করে কোনও ওয়েব পরিষেবা থেকে আসা নতুন ডেটার উপর ভিত্তি করে চার্টটি আপডেট করতে চাই, সমস্যাটি হ'ল প্রতিবার আমি আপডেট বোতামে ক্লিক করলে এটি একটি নতুন উত্পন্ন করে svg, তাই আমি পুরানোটিকে সরাতে বা এর সামগ্রী আপডেট করতে চাই।

এখানে জাভাস্ক্রিপ্ট ফাংশন থেকে একটি স্নিপেট রয়েছে যেখানে আমি এটি তৈরি করেছি svg:

var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

আমি কীভাবে পুরানো svgউপাদানটি সরিয়ে ফেলতে পারি বা কমপক্ষে এর সামগ্রীটি প্রতিস্থাপন করতে পারি ?

Comments

github.com/mbostock/d3/wiki/Selections#wiki-remove

— ফেলিক্স ক্লিং

@ ফেলিক্স ক্লিং থ্যাঙ্কস :) D3.js থেকে অপসারণ ফাংশন এটি সমাধান করেছে var svg1 = d3.select ("svg")। সরান ();

— সামি

আপনি ব্যবহার করতে পারেনd3.select("svg").empty();

— csandreas1

Answer 1

সমাধান এখানে:

d3.select("svg").remove();

এটি removeD3.js দ্বারা সরবরাহিত একটি ফাংশন is

Comments

আসলে আপনি উপাদান সরাতে চান যদি থেকে এটা ব্যবহার করা ভাল হবে SVG: svg.selectAll("*").remove();। svgএকটি গোষ্ঠীকরণ উপাদান ( g) এ পরিবর্তনশীল সেট করা থাকলেও উপাদানটির এই স্পষ্ট বিষয়বস্তু ।

— Nux

@ নাকস আপনার কারণে আমি আজ সময়মতো চলে যাচ্ছি। d3.html ('') সাফারিটিতে কাজ করে না।

— গ্লিফ

ধন্যবাদ, তবে আমি যদি কোনও চার্ট অপসারণ করি এবং তারপরে তাত্ক্ষণিকভাবে একটি নতুন চার্ট যুক্ত করার চেষ্টা করি, এটি যুক্ত হয় না? কোন পরামর্শ, ধন্যবাদ।

— codingbbq

উপরের কোডটি পুরো এসভিজি উপাদানটি সরিয়ে দেয় যাতে চার্ট রয়েছে। আমার ধারণা অনুযায়ী একটি নতুন চার্ট যুক্ত করতে আপনার একটি নতুন এসভিজি উপাদান তৈরি করতে হবে।

— সামি

আজব যে সাফারি বাগটি এখনও বিদ্যমান still তাদের প্যাচ করা উচিত।

— টাইগুই 7

Answer 2

আপনি যদি সমস্ত শিশুদের থেকে মুক্তি পেতে চান তবে

svg.selectAll("*").remove();

এসভিজির সাথে সম্পর্কিত সমস্ত সামগ্রী সরিয়ে ফেলবে।

দ্রষ্টব্য : আপনি চার্ট আপডেট করতে চান এমন ক্ষেত্রে এটি প্রস্তাবিত।

Comments

আপনি যদি কোনও চার্ট আপডেট করতে চান তবে আমি এটির প্রস্তাব দিই। তাদের বাচ্চাদের সরান তারপরে নতুনদের যুক্ত করুন।

— ম্যাথিউস আরাউজো

আমি এই উত্তরটি আমার সমস্যার সমাধান করার জন্য ব্যবহার করেছি, এই উত্তরটি এসভিজি ট্যাগের ভিতরে তৈরি সমস্ত সামগ্রী পরিষ্কার করে এবং আমি আমার চার্টগুলি বিষয়বস্তু সাফ করার পরে আপডেট করতে পারি

— হামড আর

এটি কি এসভিজির শিশুদের জন্য নির্ধারিত কোনও সম্পর্কিত ইভেন্ট শ্রোতাকে সরিয়ে দেবে?

— আনুরওপ পেন্ডেলা

Answer 3

এসভিজি উপাদান সংযোজন করার সময় আইডি বৈশিষ্ট্য নির্ধারণ করাও ডি 3 নির্বাচন করতে পারে সুতরাং পরে আইডি দ্বারা এই উপাদানটি () মুছে ফেলতে পারে:

var svg = d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...

...

d3.select("#the_SVG_ID").remove();

Comments

এটি উত্তর হিসাবে নির্বাচিত চেয়ে অনেক বেশি নিরাপদ / ক্লিনার সমাধান। আইডি ব্যবহার করে এসভিজি নির্বাচন করে, কেউ একই পৃষ্ঠায় বিদ্যমান অন্যান্য এসভিজি উপাদানগুলিকে গণ্ডগোল করতে এড়াতে পারে। দয়া করে এটি উত্সাহিত করুন।

— কোয়েস্ট Monger

আমি এটি অতীতে ব্যবহার করেছি এবং এটি একটি সুনির্দিষ্ট সমাধান। একটি আইডি যুক্ত করা নোডগুলিকেও ডকুমেন্ট করে।

— ক্রিস্টোফ রাউসি

Answer 4

আমার দুটি চার্ট ছিল।

<div id="barChart"></div>
<div id="bubbleChart"></div>

এটি সমস্ত চার্ট অপসারণ করেছে।

d3.select("svg").remove(); 

এটি বিদ্যমান বারের চার্টটি অপসারণের জন্য কাজ করেছিল, তবে তারপরে আমি বার চার্টটি পুনরায় যুক্ত করতে পারিনি

d3.select("#barChart").remove();

এই চেষ্টা। এটি আমাকে কেবলমাত্র বিদ্যমান বারের চার্টটি সরাতে দেয় না, পাশাপাশি আমাকে নতুন বারের চার্টটি পুনরায় যুক্ত করতে দেয়।

d3.select("#barChart").select("svg").remove();

var svg = d3.select('#barChart')
       .append('svg')
       .attr('width', width + margins.left + margins.right)
       .attr('height', height + margins.top + margins.bottom)
       .append('g')
       .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

এটি অপসারণের সঠিক উপায় কিনা তা নিশ্চিত নন এবং d3-তে কোনও চার্ট যুক্ত করুন। এটি ক্রোমে কাজ করেছে, তবে IE তে পরীক্ষা করে নি।

Answer 5

আমি D3.js ব্যবহার করে এসভিজি ব্যবহার করছি এবং আমারও একই সমস্যা ছিল।

আমি পূর্ববর্তী এসভিজি অপসারণের জন্য এই কোডটি ব্যবহার করেছি তবে এসভিজির অভ্যন্তরে রৈখিক গ্রেডিয়েন্ট আইই তে আসছিল না

$ ( "# Container_div_id") এইচটিএমএল ( "")।

তারপরে আমি সমস্যাটি সমাধানের জন্য নীচের কোডটি লিখেছি

$('container_div_id g').remove();
$('#container_div_id path').remove();

এখানে আমি পূর্ববর্তী জি এবং এসভিজির অভ্যন্তরে পথটি সরিয়ে দিচ্ছি, নতুনটির পরিবর্তে।

স্থির সামগ্রীতে এসভিজি ট্যাগগুলির মধ্যে আমার লিনিয়ার গ্রেডিয়েন্ট রাখা এবং তারপরে আমি উপরের কোডটি কল করেছিলাম, এটি আইই তে কাজ করে

Answer 6

আপনার এসভিজি থাকা ডিভের সামগ্রীগুলি সরাতে আপনি কেবল jQuery ব্যবহার করতে পারেন।

$("#container_div_id").html("");

Comments

আপনি যখনই ডি 3-এ এই কাজের জন্য দুর্দান্ত সরঞ্জাম ব্যবহার করছেন তখন ডিওএম ম্যানিপুলেশনের জন্য jQuery ব্যবহার করার কোনও দুর্দান্ত ধারণা নয়। বিশেষত যদি আপনার অন্যথায় ব্যবহারের জন্য jQuery না থাকে।

— ওয়ারেন রিলি

Answer 7

আপনার ব্যবহার করা উচিত append("svg:svg"), append("svg")যাতে আপনি এক্সএইচটিএমএল ব্যবহার করেন না তবে ডি 3 সঠিক 'নেমস্পেস' দিয়ে উপাদানটি তৈরি করে।