- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试通过从 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/
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
最近一直在学习D语言。我一直对运行时感到困惑。 从我能收集到的关于它的信息中,(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样,它与您自己的程序一起运行。但是既然 D 是编译
想问一下这两个正则表达式有区别吗? \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试,两者都工作正常并且结果相同。但是,当在 linux
我正在学习 Go,而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。 这是一些代码: type IPAddr
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思,但是\1-\2-\3-\4 是什么意思? 最佳答案 \1-\2-\3-\4 是 b
我一直在努力解决这个问题,这让我很恼火。我了解 D 运行时库。它是什么,它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧,XoMB 定义了自己的运行时,但是
我有两个列表列表,子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
我需要使用 Regex 格式化一个字符串,该字符串包含数字、字母 a-z 和 A-Z,同时还包含破折号和空格。 从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D,但没有成功。我也尝试过不同的方法。 import std.datetime : benc
tl;dr:你好吗perfect forwarding在 D? 该链接有一个很好的解释,但例如,假设我有这个方法: void foo(T)(in int a, out int b, ref int c
有什么方法可以在 D 中使用abstract auto 函数吗? 如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
有没有人为内存中重叠的数组切片实现交集?算法在没有重叠时返回 []。 当 pretty-print (使用重叠缩进)内存中重叠的数组切片时,我想要这个。 最佳答案 如果您确定它们是数组,那么只需取 p
我已经开始学习 D,但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
如何创建一个不可变的类? 我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData,m 表示可变。然后我创建一个别名 alias immut
不久前我买了《The D Programming Language》。好书,很有教育意义。但是,我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。 在这本书中,Andrei 写了任何可以像这样调用
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例 我想知道如何在 D 中实现可能的无限数据结构,就像
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数(或类)? 例如: source/packageA/something.d: @sillyWalk(10) void doSomething()
我是一名优秀的程序员,十分优秀!