javascript - 带日期 slider 的 D3 折线图-6ren

javascript - 带日期 slider 的 D3 折线图

转载作者：行者123 更新时间：2023-11-30 20:04:12

我正在尝试通过从 json 文件中读取数据来制作带有日期 slider 的折线图。下面是 json 文件。

下面是html页面:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- jQuery UI CSS -->
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <link rel="stylesheet" href="css/jquery-ui.structure.min.css">
        <link rel="stylesheet" href="css/jquery-ui.theme.min.css">
        <!-- Custom CSS -->
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <nav class="navbar navbar-default"></nav>

        <!-- Bootstrap grid setup -->
        <div class="container">
            <div id="selections" class="row">
                <div class="col-md-4">
                    <div id="slider-div">
                        <label>Date: <span id="dateLabel1">12/05/2013</span> - <span id="dateLabel2">31/10/2017</span></label>
                        <div id="date-slider"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="chart-area"></div>                  
                </div>
            </div>
        </div>

    <!-- External JS libraries -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/d3.min.js"></script>
    <!-- Custom JS -->
    <script src="js/main.js"></script>

    </body>
</html>

到目前为止一切顺利，我已经能够绘制折线图，我将 x 轴作为日期，y 轴作为金额和运行总计，我使用运行总计计算 Y 轴，因为那样会永远是更大的数额。

下面是 D3.JS，这里是问题所在:

var margin = { left:80, right:100, top:50, bottom:100 },
    height = 500 - margin.top - margin.bottom, 
    width = 800 - margin.left - margin.right;

var svg = d3.select("#chart-area").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + 
        ", " + margin.top + ")");

// Time parser for x-scale
var parseTime = d3.timeParse("%Y-%m-%d");
var formatTime = d3.timeFormat("%d/%m/%Y");

//Transition time
var t = function(){ return d3.transition().duration(1000); }

// Scales
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// Axis generators
var xAxisCall = d3.axisBottom();
var yAxisCall = d3.axisLeft()
    .ticks(6)
    .tickFormat(function(d) { return "$" + d3.format(",.0f")(d);});
    //d3.format(",.0f")(d);
    //.tickFormat(function(d) { return parseInt(d / 1000) + "k"; });

// Axis groups
var xAxis = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
var yAxis = g.append("g")
    .attr("class", "y axis")

var valueFiguresColour = d3.scaleOrdinal(d3.schemeSet1);

var valueFigures = ["Amount", "Running Total"];

var legend = g.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + 120 +
        "," + 5 + ")");

valueFigures.forEach(function(values, i){
    var legendRow = legend.append("g")
        .attr("transform", "translate(0, " + (i * 20) + ")");

    legendRow.append("rect")
        .attr("width", 10)
        .attr("height", 10)
        .attr("fill", valueFiguresColour(values));

    legendRow.append("text")
        .attr("x", -10)
        .attr("y", 10)
        .attr("text-anchor", "end")
        .style("text-transform", "capitalize")
        .text(values);
});

var xLable = g.append("text")
    .attr("class", "x axis-label")
    .attr("x", width / 2)
    .attr("y", height + 50)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("Date ");

// Line path generator
var line = d3.line()
    .x(function(d) { return x(d.DATE); })
    .y(function(d) { return y(d["Running Total"]); });

var line2 = d3.line()
    .x(function(d) { return x(d.DATE); })
    .y(function(d) { return y(d.AMOUNT); });



// Add jQuery UI slider
$("#date-slider").slider({
    range: true,
    max: (parseTime("31/10/2018")),
    min: (parseTime("01/10/2018")),
    step: 86400000, // One day
    values: [(parseTime("01/10/2018")), (parseTime("31/10/2018"))],
    slide: function(event, ui){
        $("#dateLabel1").text(formatTime(new Date(ui.values[0])));
        $("#dateLabel2").text(formatTime(new Date(ui.values[1])));
        update();
    }
});


d3.json("data/test.json").then(function(data) {


    // Data cleaning
    data.forEach(function(d) {
        d.DATE = parseTime(d.DATE);
        d["Running Total"] = +d["Running Total"];
        d.AMOUNT = + d.AMOUNT;
    });

    // data.forEach(function(d) {
    //     console.log(d);
    // });

    // Set scale domains
    x.domain(d3.extent(data, function(d) { return d.DATE; }));
    y.domain([d3.min(data, function(d) { return d["Running Total"]; }) / 1.002, 
        d3.max(data, function(d) { return d["Running Total"]; }) * 1.002]);

    // Generate axes once scales have been set
    xAxis.call(xAxisCall.scale(x))
    yAxis.call(yAxisCall.scale(y))

    // Add line to chart
    g.append("path")
        .attr("class", "line")
        .attr("fill", "grey")
        .style("stroke", "#377DB8")
        .attr("stroke-with", "8px")
        .attr("d", line(data));

    g.append("path")
        .attr("class", "line")
        .style("stroke", "red")
        .attr("stroke", "#E51A1D")
        .attr("stroke-with", "1px")
        .attr("d", line2(data));


        update();
});



function update(data) {

    // Filter data based on selections
    var sliderValues = $("#date-slider").slider("values");
    var dataTimeFiltered = data.filter(function(d){
        return ((d.DATE >= sliderValues[0]) && (d.DATE <= sliderValues[1]))
    });

    // Update scales
    x.domain(d3.extent(dataTimeFiltered, function(d){ return d.DATE; }));
    y.domain([d3.min(dataTimeFiltered, function(d){ return d["Running Total"]; }), 
        d3.max(dataTimeFiltered, function(d){ return d["Running Total"]; }) ]);


    // Update axes
    xAxisCall.scale(x);
    xAxis.transition(t()).call(xAxisCall);
    yAxisCall.scale(y);
    yAxis.transition(t()).call(yAxisCall.tickFormat(formatAbbreviation));


    // Path generator
    line = d3.line()
        .x(function(d){ return x(d.DATE); })
        .y(function(d){ return y(d.AMOUNT); });

    line2 = d3.line()
        .x(function(d){ return x(d.DATE); })
        .y(function(d){ return y(d["Running Total"]); });

    // Update our line path
    g.select(".line")
        .transition(t)
        .attr("d", line(dataTimeFiltered));

    g.select(".line")
        .transition(t)
        .attr("d", line2(dataTimeFiltered));
}

我确实有 grpah 显示正确的数据，一切都在正确的位置。问题是我无法让我的日期 slider 工作，也无法根据日期 slider 更新图表。有人有什么建议吗？我附上了一张我目前所拥有的图片。

最佳答案

你有一些拼写错误，你还需要设置你的线类。日期格式也需要一些调整，现在全部转换为数值。

效果不是很好，但一切如预期。

var margin = { left:40, right:40, top:40, bottom:80 },
    height = 240 - margin.top - margin.bottom, 
    width = 400 - margin.left - margin.right;

var svg = d3.select("#chart-area").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + 
        ", " + margin.top + ")");

// Time parser for x-scale
var parseTime = d3.timeParse("%Y-%m-%d");
var parseDate = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%d/%m/%Y");

//Transition time
var t = function(){ return d3.transition().duration(1000); }

// Scales
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// Axis generators
var xAxisCall = d3.axisBottom();
var yAxisCall = d3.axisLeft()
    .ticks(6)
    .tickFormat(function(d) { return "$" + d3.format(",.0f")(d);});

// Axis groups
var xAxis = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
var yAxis = g.append("g")
    .attr("class", "y axis")

var valueFiguresColour = d3.scaleOrdinal(d3.schemeSet1);

var valueFigures = ["Amount", "Running Total"];

var legend = g.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + 120 +
        "," + 5 + ")");

valueFigures.forEach(function(values, i){
    var legendRow = legend.append("g")
        .attr("transform", "translate(0, " + (i * 20) + ")");

    legendRow.append("rect")
        .attr("width", 10)
        .attr("height", 10)
        .attr("fill", valueFiguresColour(values));

    legendRow.append("text")
        .attr("x", -10)
        .attr("y", 10)
        .attr("text-anchor", "end")
        .style("text-transform", "capitalize")
        .text(values);
});

var xLable = g.append("text")
    .attr("class", "x axis-label")
    .attr("x", width / 2)
    .attr("y", height + 50)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("Date ");

var startDate = new Date(parseDate("05/10/2018")).valueOf();
var endDate = new Date(parseDate("23/10/2018")).valueOf();



// Add jQuery UI slider
$("#date-slider").slider({
    range: true,
    min: startDate,
    max: endDate,
    step: 86400000, // One day
    values: [startDate, endDate],
    slide: function(event, ui){
        $("#dateLabel1").text(formatTime(new Date(ui.values[0])));
        $("#dateLabel2").text(formatTime(new Date(ui.values[1])));
        update(data);
    }
});


var data = [
    {"DATE":"2018-10-05","AMOUNT":1.000000000000000e+002,"Running Total":1.000000000000000e+002},
    {"DATE":"2018-10-06","AMOUNT":1.000000000000000e+003,"Running Total":1.100000000000000e+003},
    {"DATE":"2018-10-07","AMOUNT":5.000000000000000e+003,"Running Total":6.100000000000000e+003},
    {"DATE":"2018-10-08","AMOUNT":2.000000000000000e+003,"Running Total":8.100000000000000e+003},
    {"DATE":"2018-10-09","AMOUNT":1.000000000000000e+003,"Running Total":9.100000000000000e+003},
    {"DATE":"2018-10-10","AMOUNT":5.000000000000000e+003,"Running Total":1.410000000000000e+004},
    {"DATE":"2018-10-11","AMOUNT":3.000000000000000e+003,"Running Total":2.510000000000000e+004},
    {"DATE":"2018-10-12","AMOUNT":1.200000000000000e+004,"Running Total":3.710000000000000e+004},
    {"DATE":"2018-10-13","AMOUNT":5.000000000000000e+003,"Running Total":4.210000000000000e+004},
    {"DATE":"2018-10-17","AMOUNT":1.300000000000000e+004,"Running Total":5.510000000000000e+004},
    {"DATE":"2018-10-18","AMOUNT":1.500000000000000e+004,"Running Total":7.010000000000000e+004},
     {"DATE":"2018-10-19","AMOUNT":2.500000000000000e+004,"Running Total":8.010000000000000e+004},
     {"DATE":"2018-10-20","AMOUNT":1.600000000000000e+004,"Running Total":5.010000000000000e+004},
     {"DATE":"2018-10-21","AMOUNT":1.800000000000000e+004,"Running Total":7.010000000000000e+004},
     {"DATE":"2018-10-22","AMOUNT":1.900000000000000e+004,"Running Total":9.010000000000000e+004},
     {"DATE":"2018-10-23","AMOUNT":3.500000000000000e+004,"Running Total":7.010000000000000e+004}
];
  // Data cleaning
data.forEach(function(d) {
    d.DATE = parseTime(d.DATE);
    d["Running Total"] = +d["Running Total"];
    d.AMOUNT = +d.AMOUNT;
});
 
// Set scale domains
x.domain(d3.extent(data, function(d) { return d.DATE; }));
y.domain([d3.min(data, function(d) { return d["Running Total"]; }) / 1.002, 
    d3.max(data, function(d) { return d["Running Total"]; }) * 1.002]);

// Generate axes once scales have been set
xAxis.call(xAxisCall.scale(x))
yAxis.call(yAxisCall.scale(y))

// Path generator
var line = d3.line()
  .x(function(d){ return x(d.DATE); })
  .y(function(d){ return y(d.AMOUNT); });
  
var line2 = d3.line()
  .x(function(d){ return x(d.DATE); })
  .y(function(d){ return y(d["Running Total"]); });
  
// Add line to chart
g.append("path")
    .attr("class", "line")
    .attr('fill', 'rgba(0,0,0,0)')
    .style("stroke", "red")
    .attr("stroke", "#E51A1D")
    .attr("stroke-width", "2px")
    .attr("d", line(data));

g.append("path")
    .attr("class", "line2")
    .attr("fill", "rgba(0,0,0,0)")
    .style("stroke", "#377DB8")
    .attr("stroke-width", "2px")
    .attr("d", line2(data));

update(data);


function update(data) {

    // Filter data based on selections
    var sliderValues = $("#date-slider").slider("values");
    
    var dataTimeFiltered = data.filter(function(d){
        return ((d.DATE >= sliderValues[0]) && (d.DATE <= sliderValues[1]))
    });

    // Update scales
    x.domain(d3.extent(dataTimeFiltered, function(d){ return d.DATE; }));
    y.domain([0, 
        d3.max(dataTimeFiltered, function(d){ return d["Running Total"]; }) ]);



    // Update axes
    xAxisCall.scale(x);
    yAxisCall.scale(y);
    
    // Update our line path
    g.select(".line")
        .transition(t)
        .attr("d", line(dataTimeFiltered));

    g.select(".line2")
        .transition(t)
        .attr("d", line2(dataTimeFiltered));
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
        <!-- jQuery UI CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
    </head>

    <body>
        <nav class="navbar navbar-default"></nav>

        <!-- Bootstrap grid setup -->
        <div class="container">
            <div id="selections" class="row">
                <div class="col-md-4">
                    <div id="slider-div">
                        <label>Date: <span id="dateLabel1">05/10/2018</span> - <span id="dateLabel2">23/10/2018</span></label>
                        <div id="date-slider"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="chart-area"></div>                  
                </div>
            </div>
        </div>

    <!-- External JS libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

    </body>
</html>

关于javascript - 带日期 slider 的 D3 折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53089610/

文章推荐： c - 如何跳出空白输入的循环

文章推荐： javascript - 为什么在js中每隔一秒弹出一次警告框

文章推荐： javascript - 如何修复 uglifyjs 给我创建 bundle 的名称错误？

mysql join 选择两个表之间的最小(日期)和最大(日期)
我的数据库中有两张表，一张用于 field ，另一张用于预订。我需要的是一个查询来选择所有未预订的 field 。见下文: 餐 table 预订具有以下字段: bk_id venue_id 作为(预订
php - 表格日期输入从(日期)到(日期)或我不知道一个或两个选择
嗨，我是编码新手，我有一些培训项目，其中包括从 HTML 表单输入 MySQL 数据库。它就像你玩过的游戏的日志。第一个日期输入是您开始游戏的时间，第二个日期输入是您完成游戏的时间。但我需要检查器或类
mysql - 如何从同一张表中获取最小(日期)、最大(日期)及其数量？
我是这个 sql 编码的新手，我正在尝试学习新的东西。因此，我创建了一个交货表，其中包含一些属性，如商品代码、交货日期、交货数量。所以如何从同一张表中获取第一个交货日期(最小日期)和交货数量以及最晚交
PHP 日期 ISO 8601 日期时区
我从支付网关返回了这个日期 2014-05-15T08:40:52+01:00 我得到 2014-05-15T08:40:52 但我无法识别时区 +01:00 的含义我的位置时区是 UTC−06:0
sql - 从一列中选择最小(日期)、最大(日期)和按天分组 - SQL
我快要疯了，请帮忙。我有一列包含日期时间值。我需要找到每天的最小值和最大值。数据看起来像这样 2012-11-23 05:49:26.000 2012-11-23 07:55:43.000
javascript - {{x.日期 |日期 :'hh:mm' }} 不起作用
我从 json 数据中获取日期为 2015 年 4 月 15 日晚上 10:15我只想在 html 页面中显示 json 响应数据的时间，例如 10:15 PM这里我放了我的js函数和html代码 J
c# - 将 .NET 日期/时间格式字符串转换为 Javascript 日期/时间格式字符串
是否有 javascript 库或其他机制允许我将 .NET 日期/时间格式字符串(即 yyyy-MM-dd HH:mm:ss)传递给 javascript函数并让它相应地解析提供的日期时间值？我一直
javascript - 如何将 UTC 日期/时间转换为 EST 日期/时间
我正在使用以下代码以正确的格式获取当前的 UTC 时间，但客户返回并要求时间戳现在使用 EST 而不是 UTC。我搜索了 Google 和 stackoverflow，但找不到适用于我现有代码的答案。
r - 如何找到值低于 0 的 5 行或更多行(日期)系列的第一行(日期)
我有以下日期的平均温度数据。我想找到连续至少 5 天低于或高于 0 摄氏度的开始日期。 date_short mean.temp 1 2018-05-18 17.54 2 2018-05-19
javascript - 日期.值 = 新日期(日期.值);在 IE11 中不起作用
它可以在其他网络浏览器中使用，但 IE11 返回无效日期。为了调试我使用了下面的代码。 console.log('before - ' + date.value); date.value = new
javascript - 将 JSON 日期/日期(1388624400000)/转换为 Excel 中的日期
我在 Excel 中有一个数据的 Web 提取，其中日期列带有/Date(1388624400000)/。我需要在 Excel 中将其转换为日期。最佳答案能够从 here 中推断出它. 假设字符串
node.js - Mongoose 更新条件 PDT 日期/型号 ISO 日期
嗨，我的 Schmema 有一个带有 ISO 日期的字段: ISODate("2015-04-30T14:47:46.501Z") Paypal 在成功付款后以该形式返回日期对象: Time/Date
mysql - 如何在 MySQL 服务器中将最小(日期)和最大(日期)之间的小时分割为 4 小时板
我的 table : CREATE TABLE `tbdata` ( `ID` INT(10) NOT NULL AUTO_INCREMENT, `PatientID` INT(10) NOT
linux - Bash:日期 "%b"和日期 "%h"(当然还有)日期 "%B"给出月份的全名？
我正在 Ubuntu 服务器 12.04 中编写一个 shell 脚本，它应该比较日志文件中的一些数据。在日志文件中，日期以以下格式给出: [Mon Apr 08 15:02:54 2013] 如您所
mysql - 当在年(日期)和月(日期)上使用 MYSQL GROUP BY AND ROLLUP 时，我无法将 Null 更改为 'Total'
我想使用 GROUP BY WITH ROLLUP 创建一个表并获取总行数而不是 null。 $sql ="SELECT IF(YEAR(transaktioner.datum
Django 错误 : could not parse the remainder: ': "Y-m-d "' from ' post. 日期|日期: "Y-m-d"'
我正在创建博客文章，在成功迁移我的博客文件后，当我转到我网站的博客页面时返回一个错误(无法解析其余部分:':“Ymd”'来自'post.date|date: "Ymd"') 我似乎无法确定这是语法错误
JavaScript 日期
我正在尝试获取要插入到 CAML 查询中的月份范围，即:2010-09-01 和 2010-09-30。我使用以下代码生成这两个值: var month = "10/2010"; var month
JavaScript 日期
如何将代码document.write("直到指定日期")更改为writeMessage(date)中的日期？此外，writeMessage(date) 中的日期未正确显示(仅显示年份)。感谢您帮助解
更改目录时间/日期
我在 Windows (XP) 和 Linux 上都尝试过 utime()。在 Windows 上我得到一个 EACCES 错误，在 Linux 上我没有得到任何错误(但时间没有改变)。我的 utim
r - (日期)内的总和
我正在尝试计算发生在同一日期的值的总和(在 XYZmin 中)。我的数据看起来像这样， bar <- structure(list(date = structure(c(15622, 15622,

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 带日期 slider 的 D3 折线图