我已经实现了该图d3。用于构造图形的数据来自异步方法SpecificMuseum（名称）。
specificoMuseo(name).then(proof => {
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 110, left: 40},
margin2 = {top: 430, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right - 150, // sommo 150 perchè la width prima era 1200, mentre ora è stata settata a 1350, in modo da far vedere l'etichetta dei valori correnti, quindi sommo 150 per tenere invece la width (inteso come valore) uguale a prima
height = +svg.attr("height") - margin.top - margin.bottom, // l'altezza del piano grafico
height2 = +svg.attr("height") - margin2.top - margin2.bottom;
var parseDate = d3.timeParse("%b %Y")
bisectDate = d3.bisector(function(d) { return d.date; }).left;;
var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
y2 = d3.scaleLinear().range([height2, 0]);
var xAxis = d3.axisBottom(x),
xAxis2 = d3.axisBottom(x2),
yAxis = d3.axisLeft(y);
var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
var zoom = d3.zoom()
.scaleExtent([1, 10])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var area = d3.area()
.curve(d3.curveMonotoneX)
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.price); });
var area2 = d3.area()
.curve(d3.curveMonotoneX)
.x(function(d) { return x2(d.date); })
.y0(height2)
.y1(function(d) { return y2(d.price); });
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var g = svg.append("g") // riferito al primo piano
//.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g") // riferito al secondo piano
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
var data = proof;
var datax = [{date: 'Jan 2007', price: 0}, {date: 'Feb 2007', price:0},{date: 'Mar 2007', price:0}, {date: 'Apr 2007', price: 0}, {date: 'May 2007', price: 0}, {date: 'Jun 2007', price: 0}, {date: 'Jul 2007', price: 0}, {date: 'Aug 2007', price: 0}, {date: 'Sep 2007', price: 0}, {date: 'Oct 2007', price: 0}, {date: 'Nov 2007', price: 0}, {date: 'Dec 2007', price: 0}];
data.forEach(function (d) {
d.date = parseDate(d.date);
d.price = d.price;
});
datax.forEach(function (d) {
d.date = parseDate(d.date);
d.price = d.price;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, Math.max(d3.max(data, function(d) { return d.price; }), d3.max(datax, function(d) { return d.price; })) ]);
x2.domain(x.domain());
y2.domain(y.domain());
g.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
g.append("path")
.datum(datax)
.attr("class", "areax")
.attr("d", area);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
g.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
var focus = g.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("line")
.attr("class", "x-hover-line hover-line")
.attr("y1", 0) // punto di inizio della linea
.attr("y2", height); // punto di fine della linea, dicendomi quanto deve essere lunga
focus.append("line")
.attr("class", "y-hover-line hover-line")
.attr("x1", width)
.attr("x2", width);
focus.append("circle")
.attr("r", 0);
focus.append("text")
.attr("x", 15) // mi dice la distanza dall'asse verticale
.attr("dy", ".31em");
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2);
context.append("path")
.datum(datax)
.attr("class", "areax")
.attr("d", area2);
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
svg.append("rect")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("class", "overlay")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.call(zoom)
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
});
我已经实现了此搜索/过滤器下拉列表：
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
</div>
</div>
我有一个全局变量名，每当我单击“搜索/过滤器”下拉列表中的一个值时，该名称即为该值，即，如果单击“ ACQUARIO”，则名称将为“ ACQUARIO”。当我单击“搜索/过滤器”下拉列表中的一个值（例如ACQUARIO）时，我想用新数据更新图形，即specificoMuseo（“ ACQUARIO”）
document.addEventListener("DOMContentLoaded", function(event) {
allNameMuseums().forEach(function(item) { // ITERAZIONE
document.getElementById("myDropdown").innerHTML += '<a onclick="fnclick(this)">' + item + '</a>';
})
});
var name = "TuttiMusei"; //global variable so you can access in your method
var data;
function fnclick(obj) {
name = obj.innerHTML;
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function allNameMuseums() {
return ["ACQUARIO", "TuttiMusei"];
}