堆棧內存溢出
  簡體   English   中英

使用按鈕更新圖表和文本 (D3.js)

[英]Update chart and text with button (D3.js)

 原文  2020-03-13 00:41:15  2   1    javascript/ html/ d3.js

問題描述

我想制作 3 個可以在用戶單擊按鈕時更新（一張一張顯示）的圖表。 像這樣： 圖表示例

但我也想在圖表下方添加一個文本（h3 元素）。 這是我的代碼：HTML：

<!DOCTYPE html>
<html lang="en">

<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>

JS（純無 Jquery）：

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");

// Create a function that takes a dataset as input and update the plot:
function update(data) {
    // 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 Jumlah Tayangan dulu (onload)
var tulisanBawah = document.getElementsByTagName("h3")[0];
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 語句中犯了一些錯誤，但我仍然無法弄清楚。 這是我的 JSFiddle： https ://jsfiddle.net/tw0jbd81/1/

1 個解決方案

解決方案1
 3 已采納  2020-03-13 01:10:20

因此，您將數據集作為參數傳遞給全局變量中單擊按鈕的更新函數。

這部分也無用

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)，它解析為 undefined（因為函數不返回任何東西），然后它再次調用 update(users)，它再次解析為 undefined 所以條件體未觸發。

我會以不同的方式做到這一點

  1. 將函數參數設為我們要使用的字符串數據集名稱，這樣我們就可以從 HTML vie update('pageViews') 調用它
  2. 調用腳本頁腳上的更新方法
  3. 將標題更新登錄移動到更新功能中
  4. 附加按鈕回調，如頁面視圖
  5. 為了更新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/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 d3.js / JavaScript是否可以像圖表中那樣更新文本值？ 更新d3.js雷達圖 D3.js關於更新圖表數據 如何在d3.js中更新氣泡圖？ d3.js更新折線圖上的圓圈 Dc.js和D3.js圖表​​更新 d3.js-多個折線圖不會更新圓 如何使用更新的數據集更新d3.js餅圖 堆積的條形圖更新不起作用d3.js D3.js如何使用新數據更新圖表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM