我想制作 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 关注
- 66 浏览
添加回答
举报
0/150
提交
取消