我想通过使用D3.js库制作响应式图表，我尝试了很少的参考，但仍然无法弄清楚如何使我的图表完全响应。
这是代码：
HTML
<div class="wrapper-inner" id="wrapper-button">
<div class="wrapper-button">
<button
class="btn active"
id="btnPageViews"
onclick="update('pageViews')"
>
Page Views
</button>
<button class="btn" id="btnUsers" onclick="update('users')">
Users
</button>
<button
class="btn"
id="btnBounceRate"
onclick="update('BounceRate')"
>
Bounce Rate
</button>
</div>
</div>
<!--svg chart-->
<div class="wrapper-inner chart">
<div id="pv-bounce" class="chart-container"></div>
<!--tulisan di bawah chart-->
<div data-aos="fade-up">
<h3 id="title"></h3>
</div>
</div>
JavaScript：
var pageViews = [
{ ser1: 1, ser2: 3625 },
{ ser1: 2, ser2: 2698 },
{ ser1: 3, ser2: 2441 },
{ ser1: 4, ser2: 2399 },
{ ser1: 5, ser2: 2342 },
{ ser1: 6, ser2: 2279 },
{ ser1: 7, ser2: 2087 },
{ ser1: 8, ser2: 2070 },
{ ser1: 9, ser2: 2490 },
{ ser1: 10, ser2: 2535 },
{ ser1: 11, ser2: 3468 },
{ ser1: 12, ser2: 2526 },
{ ser1: 13, ser2: 2837 },
{ ser1: 14, ser2: 1689 },
{ ser1: 15, ser2: 1420 },
{ ser1: 16, ser2: 1477 },
{ ser1: 17, ser2: 1636 },
{ ser1: 18, ser2: 1628 },
{ ser1: 19, ser2: 1525 },
{ ser1: 20, ser2: 1422 },
{ ser1: 21, ser2: 1198 },
{ ser1: 22, ser2: 1384 },
{ ser1: 23, ser2: 1492 },
{ ser1: 24, ser2: 1508 },
{ ser1: 25, ser2: 0 },
{ ser1: 26, ser2: 0 },
{ ser1: 27, ser2: 0 },
{ ser1: 28, ser2: 0 },
{ ser1: 29, ser2: 0 },
{ ser1: 30, ser2: 0 },
{ ser1: 31, ser2: 0 }
];
var users = [
{ ser1: 1, ser2: 1332 },
{ ser1: 2, ser2: 956 },
{ ser1: 3, ser2: 909 },
{ ser1: 4, ser2: 924 },
{ ser1: 5, ser2: 864 },
{ ser1: 6, ser2: 799 },
{ ser1: 7, ser2: 824 },
{ ser1: 8, ser2: 812 },
{ ser1: 9, ser2: 881 },
{ ser1: 10, ser2: 926 },
{ ser1: 11, ser2: 1330 },
{ ser1: 12, ser2: 964 },
{ ser1: 13, ser2: 913 },
{ ser1: 14, ser2: 695 },
{ ser1: 15, ser2: 567 },
{ ser1: 16, ser2: 609 },
{ ser1: 17, ser2: 651 },
{ ser1: 18, ser2: 654 },
{ ser1: 19, ser2: 630 },
{ ser1: 20, ser2: 621 },
{ ser1: 21, ser2: 516 },
{ ser1: 22, ser2: 610 },
{ ser1: 23, ser2: 641 },
{ ser1: 24, ser2: 648 },
{ ser1: 25, ser2: 0 },
{ ser1: 26, ser2: 0 },
{ ser1: 27, ser2: 0 },
{ ser1: 28, ser2: 0 },
{ ser1: 29, ser2: 0 },
{ ser1: 30, ser2: 0 },
{ ser1: 31, ser2: 0 }
];
var BounceRate = [
{ ser1: 1, ser2: 5.68 },
{ ser1: 2, ser2: 4.49 },
{ ser1: 3, ser2: 5.29 },
{ ser1: 4, ser2: 5.74 },
{ ser1: 5, ser2: 6.14 },
{ ser1: 6, ser2: 3.95 },
{ ser1: 7, ser2: 6.03 },
{ ser1: 8, ser2: 5.08 },
{ ser1: 9, ser2: 5.1 },
{ ser1: 10, ser2: 4.78 },
{ ser1: 11, ser2: 3.84 },
{ ser1: 12, ser2: 5.75 },
{ ser1: 13, ser2: 4.92 },
{ ser1: 14, ser2: 6.88 },
{ ser1: 15, ser2: 7.01 },
{ ser1: 16, ser2: 7.29 },
{ ser1: 17, ser2: 6.49 },
{ ser1: 18, ser2: 4.38 },
{ ser1: 19, ser2: 6.12 },
{ ser1: 20, ser2: 7.19 },
{ ser1: 21, ser2: 6.64 },
{ ser1: 22, ser2: 8.44 },
{ ser1: 23, ser2: 7.41 },
{ ser1: 24, ser2: 7.45 },
{ ser1: 25, ser2: 0 },
{ ser1: 26, ser2: 0 },
{ ser1: 27, ser2: 0 },
{ ser1: 28, ser2: 0 },
{ ser1: 29, ser2: 0 },
{ ser1: 30, ser2: 0 },
{ ser1: 31, ser2: 0 }
];
// set the dimensions and margins of the graph
var margin = { top: 10, right: 30, bottom: 20, left: 40 },
width = 500 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3
.select("#pv-bounce")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Initialise a X axis:
var x = d3.scaleLinear().range([0, width]);
var xAxis = d3.axisBottom().scale(x);
svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "myXaxis");
// Initialize an Y axis
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft().scale(y);
svg.append("g").attr("class", "myYaxis");
var title = document.querySelector("#title");
// Create a function that takes a dataset as input and update the plot:
function update(dataSetName) {
if (dataSetName === "pageViews") {
var data = pageViews;
title.innerText =
"Text goes here.";
} else if (dataSetName === "users") {
var data = users;
title.innerText =
"Text goes here.";
} else if (dataSetName === "BounceRate") {
var data = BounceRate;
title.innerText =
"Text goes here.";
}
// Create the X axis:
x.domain([
0,
d3.max(data, function(d) {
return d.ser1;
})
]);
svg
.selectAll(".myXaxis")
.transition()
.duration(2500)
.call(xAxis);
// create the Y axis
y.domain([
0,
d3.max(data, function(d) {
return d.ser2;
})
]);
svg
.selectAll(".myYaxis")
.transition()
.duration(2500)
.call(yAxis);
// Create a update selection: bind to the new data
var u = svg.selectAll(".lineTest").data([data], function(d) {
return d.ser1;
});
// Update the line
u.enter()
.append("path")
.attr("class", "lineTest")
.merge(u)
.transition()
.duration(2500)
.attr(
"d",
d3
.line()
.x(function(d) {
return x(d.ser1);
})
.y(function(d) {
return y(d.ser2);
})
)
.attr("fill", "none")
.attr("stroke", "#ef504d")
.attr("stroke-width", 5);
}
// update the first button onload
update("pageViews");
// active toggle button
var header = document.getElementById("wrapper-button");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
JSFiddle：https://jsfiddle.net/mpj5sa47/
我通常使用Chart.js，它比d3.js更加简单，我只想尝试一些新的东西，但无法弄清楚怎么做。我读了另一个答案（How to make a D3 Line Chart Responsive），但我真的不知道如何重绘图表。
有人可以帮助我吗？