使用按钮更新图表和文本 (D3.js)
我想制作 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/
江户川乱折腾浏览 67回答 1
1回答
-
慕田峪7331174
因此，您将数据集作为参数传递给全局变量中单击按钮时的更新函数。这部分也没什么用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 graphvar 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 pagevar 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 axisvar 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/
随时随地看视频慕课网APP
相关分类
Html5