Wie kann man ein bestehendes D3-Diagramm ausblenden und ein neues Diagramm rendern? - html, d3.js, svg, anhängen, überlagern

Ich habe ein Dropdown-Menü mit Checkbox-Optionen hinzugefügt. Wenn eine Option ausgewählt ist, wird ein D3-Diagramm im div gerendert #chartContainer und fügt eine neue Schaltfläche für das Diagramm über dem Container hinzu.

Wenn ich Option 2 im Dropdown-Menü auswähle, wird die zweite Tab-Schaltfläche hinzugefügt, aber das zweite Diagramm wird unter dem ersten gerenderten Diagramm gerendert.

Meine Absicht ist es, die aktuell gerenderte Svg auszublenden und den nächsten Graphen anzuzeigen, wenn eine neue Graphenoption ausgewählt ist.

Wie kann man ein bestehendes D3-Diagramm ausblenden und ein neues Diagramm rendern?

chartContainer und Diagramm Optionen Kontrollkästchen:

<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>

Chart-Sichtbarkeit nach ID-Methode umschalten:

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

Code-Snippet, das in ChartContainer eine Registerkarte erstellt und ein Diagramm zeichnet:

         /* 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);

}

Antworten:

2 für die Antwort № 1

Was Sie tun können, ist alle Graphen in verschiedenen zu zeichnen div mit einzigartig 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

Fügen Sie dann auf den Registerkarten ein Ereignis hinzu, das alle Graphen ausblendet div außer dem, der so ausgewählt wurde:

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

mit onlyShowByID tun

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

Sieh dir diese Geige an: https://jsfiddle.net/m4mqrnxk/1/


Speisekarte