我想制作 3 個圖表，當用戶單擊按鈕時可以更新（一一顯示）。像這樣：但我也想在圖表下方添加一個文本（h3 元素）。這是我的代碼： HTML：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button onclick="update(pageViews)">Page Views</button> <button onclick="update(users)">Reader</button> <button onclick="update(BounceRate)">Bounce Rate</button> <div id="myChart"></div> <h3> Total of Page View on March is xxxx. </h3> <script src="https://d3js.org/d3.v4.js"></script> <script src="stackOverflow.js" charset="utf-8"></script></body></html>圖表運行良好，但文本不會改變。有人可以幫忙嗎？我認為我在 if 語句中犯了一些錯誤，但我仍然無法弄清楚。這是我的 JSFiddle：https://jsfiddle.net/tw0jbd81/1/
1 回答
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
因此，您將數據集作為參數傳遞給全局變量中單擊按鈕時的更新函數。
這部分也沒什么用
if (update(pageViews)) {
tulisanBawah.innerHTML = "Total page views of march";
console.log("pageviews");
} else if (update(users)) {
tulisanBawah.innerHTML = "Total users of march";
console.log("users");
}
因為所做的事情是，它在第一個 IF 條件中調用 update(pageViews)，該條件解析為未定義（因為該函數不返回任何內容），然后它再次調用 update(users)，該條件再次解析為未定義，因此條件體不會被觸發。
我會用一種不同的方式來做這件事
將函數參數設置為我們要使用的字符串數據集名稱，這樣我們就可以從 HTML vie update('pageViews') 中調用它
調用腳本頁腳的 update 方法
將標題更新登錄移至更新功能內
附加按鈕回調，例如頁面視圖
為了更新H3元素的內容，使用innerText，而不是innerHTML
所以最終的JS會是這樣的
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: 0 },
{ ser1: 14, ser2: 0 },
{ ser1: 15, ser2: 0 },
{ ser1: 16, ser2: 0 },
{ ser1: 17, ser2: 0 },
{ ser1: 18, ser2: 0 },
{ ser1: 19, ser2: 0 },
{ ser1: 20, ser2: 0 },
{ ser1: 21, ser2: 0 },
{ ser1: 22, ser2: 0 },
{ ser1: 23, ser2: 0 },
{ ser1: 24, ser2: 0 },
{ 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: 0 },
{ ser1: 14, ser2: 0 },
{ ser1: 15, ser2: 0 },
{ ser1: 16, ser2: 0 },
{ ser1: 17, ser2: 0 },
{ ser1: 18, ser2: 0 },
{ ser1: 19, ser2: 0 },
{ ser1: 20, ser2: 0 },
{ ser1: 21, ser2: 0 },
{ ser1: 22, ser2: 0 },
{ ser1: 23, ser2: 0 },
{ ser1: 24, ser2: 0 },
{ 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: 0 },
{ ser1: 14, ser2: 0 },
{ ser1: 15, ser2: 0 },
{ ser1: 16, ser2: 0 },
{ ser1: 17, ser2: 0 },
{ ser1: 18, ser2: 0 },
{ ser1: 19, ser2: 0 },
{ ser1: 20, ser2: 0 },
{ ser1: 21, ser2: 0 },
{ ser1: 22, ser2: 0 },
{ ser1: 23, ser2: 0 },
{ ser1: 24, ser2: 0 },
{ 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: 50 },
width = 650 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3
.select("#myChart")
.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 = "Page Views"
}
else if (dataSetName === "users") {
var data = users
title.innerText = "Users"
}
else if (dataSetName === "BounceRate") {
var data = BounceRate
title.innerText = "Bounce Rate"
}
// 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 tulisan bawah
}
update('pageViews')
請參閱此處的 JS 小提琴 https://jsfiddle.net/modularcoder/tLv3pusb/21/
- 1 回答
- 0 關注
- 104 瀏覽
添加回答
舉報
0/150
提交
取消