मौजूदा डी 3 चार्ट को कैसे छुपाएं और नया ग्राफ प्रस्तुत करें? - एचटीएमएल, d3.js, svg, संलग्न, ओवरले

मैंने चेकबॉक्स विकल्पों का एक ड्रॉपडाउन जोड़ा है, जब कोई विकल्प चुना जाता है तो यह div में डी 3 ग्राफ प्रस्तुत करता है #chartContainer और कंटेनर के ऊपर उस चार्ट के लिए एक नया बटन टैब जोड़ता है।

लेकिन अगर मैं ड्रॉपडाउन में विकल्प दो का चयन करता हूं, तो दूसरा टैब बटन जोड़ा जाता है लेकिन दूसरा ग्राफ प्रस्तुत किए गए पहले ग्राफ के नीचे प्रस्तुत किया जाता है।

मेरा इरादा वर्तमान प्रस्तुत एसवीजी को छिपाना है और जब कोई नया ग्राफ विकल्प चुना जाता है तो अगला ग्राफ दिखाएं।

मौजूदा डी 3 चार्ट को कैसे छुपाएं और नया ग्राफ प्रस्तुत करें?

चार्टकेंटर और चार्ट विकल्प चेकबॉक्स:

<ul class="dropdown-menu" id="chartDropdown" role="menu">
<li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Chart 1</a></li>
<li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Chart 2</a></li>
</ul>


<div class="row top-buffer" id="tabContainer">

<ul class="nav nav-pills" id="chartTabs">
<li><a data-toggle="tab" href="#fragment-1">Chart</a></li>
</ul>


@* render chart in this container *@
<div id="chartContainer">


</div>
</div>

आईडी विधि द्वारा चार्ट दृश्यता टॉगल करें:

   function toggle_chart_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "block")
e.style.display = "none";
else
e.style.display = "block";
}

स्क्रिप्ट का स्निपेट जो टैब बनाता है और चार्टकॉन्टेनर में आलेख खींचता है:

         /* dataSet object requriement: data, categories, filter lists*/
function visualize(rawDataSet) {
//0. process data
let dataSet = process(rawDataSet, "month");
let mode = "month";
// let dataSet = process(rawDataSet, "day");
//1. draw legend and all radio button fitlers
//2. draw main chart

let newStackChart = stackChart().data(dataSet).tickFormat("%b/%y");

//Dynamically create a new tab for the rendered graph
var ul = tabs.find( "ul" );
$( "<li><a href="#fragment-" + ++tabCounter + "">Chart</a></li>" ).appendTo( ul );
tabs.tabs( "refresh" );
tabs.tabs("select", tabCounter - 1);


//toggle the previous chart to hide
//to make room for the next chart render
//not sure how to get the id of the current svg rendered
toggle_chart_visibility(svg);

d3.select("div#chartContainer")
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 2000 2000")
//class to make it responsive
.classed("svg-content-responsive", true)
.call(newStackChart);

}

उत्तर:

जवाब के लिए 2 № 1

आप क्या कर सकते हैं सभी ग्राफ अलग-अलग खींचें div अद्वितीय के साथ id

d3.select("#chartContainer")
.selectAll("div")
.data(data)
.enter()
.append("div")
.attr("id", function(d, i){ return "id" + i })
.text(function(d){ return "This is chart " + d;}) // add your graph here

फिर उन टैब पर एक ईवेंट जोड़ें जो सभी ग्राफ को छुपाएगा div इस तरह चुने गए को छोड़कर:

d3.select("ul#tabs")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function(d){ return d; })
.on("click", function(d, i){onlyShowByID("id" + i); });

साथ में onlyShowByID करते हुए

function onlyShowByID(id) {
d3.select("#chartContainer")
.selectAll("div")
.style("display", function(d){
var currentID = d3.select(this).attr("id");
return currentID === id ? "block" : "none"
})
}

यह पहेली देखें: https://jsfiddle.net/m4mqrnxk/1/


संबंधित सवाल
सबसे लोकप्रिय