- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我制作了一个网络爬虫,它获取有关不同银行的货币转账率的数据,并在 D3 线图中显示随时间变化的数据(每家银行都有一条线,汇率是每天)。 cronjob 服务器端确保每天进行抓取。
在前端,它使用 D3.json 从这个 url 获取数据:
http://rateswebscraper.herokuapp.com/rates
我制作了折线图,但它显示的不是每个银行的线,而是黑色区域,请参见下面的屏幕截图:
这是我的代码:
/*global d3*/
var margin = {
top: 20,
right: 50,
bottom: 20,
left: 50
};
var w = 1000 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var ratesData = "http://rateswebscraper.herokuapp.com/rates";
//load buy or sell data
var loadData = function(dataSet, title) {
//set chart title
document.getElementById("title").innerHTML = title;
//reset SVG container element
d3.select("#chart").select("svg").remove();
var svg = d3.select("#chart")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("id", "area");
//Create the scales
var x = d3.scaleTime().range([0, w]),
y = d3.scaleLinear().range([h, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
//Line generator for path
var line = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.rate);
});
d3.json(ratesData, function(data) {
//convert date strings bank to date objects for d3.scaleTime
var rates = data.map(function(item) {
item.date = new Date(item.date);
return item;
});
var banks = rates[0].data.map(function(item) {
//loop through the .data array and get the bank names for the series
var bank = {};
bank.id = item.name;
bank.values = [];
return bank;
});
var createRates = function(type) {
rates.forEach(function(item) {
item.data.forEach(function(rate) {
for (var i = 0; i < banks.length; i++) {
if (banks[i].id === rate.name) {
var rateObject = {};
rateObject.date = new Date(item.date);
if (type === "buy") {
rateObject.rate = Number(rate.buy);
} else {
rateObject.rate = Number(rate.sell);
}
banks[i].values.push(rateObject);
}
}
});
});
};
//Create a rates array per bank of buy values
if (dataSet === "buy") {
createRates("buy");
} else {
createRates("sell");
}
//Get the Min/Max values for date and rates and setup color scale based on bank ID
x.domain(d3.extent(rates, function(d) {
return d.date;
}));
y.domain([
d3.min(banks, function(c) {
return d3.min(c.values, function(d) {
if (d.rate !== 0) {
return d.rate;
} else {
return
}
});
}),
d3.max(banks, function(c) {
return d3.max(c.values, function(d) {
return d.rate;
});
})
]);
//color scale needs an array of bank id's
z.domain(banks.map(function(c) {
return c.id;
}));
//append x Axis
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(x));
//append y Axis
svg.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Rates in HKD");
//for every bank element we append a g group element
var bank = svg.selectAll(".bank")
.data(banks)
.enter().append("g")
.attr("class", "bank");
//for every bank element we append a path element and use the line generator
bank.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return z(d.id);
});
//append a text next to the line for every bank
bank.append("text")
.datum(function(d) {
return {
id: d.id,
value: d.values[d.values.length - 1]
};
})
.attr("transform", function(d) {
return "translate(" + x(d.value.date) + "," + y(d.value.rate) + ")";
})
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px work sans")
.text(function(d) {
return d.id;
});
}); =
};
//Call loadData function on page load with buy rates
loadData("buy", "Buy Rates");
//Add click events to buttons to load buy or sell data
document.getElementById("buyData").addEventListener("click", function() {
loadData("buy", "Buy Rates");
});
document.getElementById("sellData").addEventListener("click", function() {
loadData("sell", "Sell Rates");
})
任何人都可以帮助我在我的代码中做错了什么?
最佳答案
给路径添加样式:
.style("fill","none");
关于javascript - 为什么我的 D3 线图显示每个实体的黑色区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42756085/
我正在练习课本上的练习,但无法获得应有的输出。 这是我所拥有的: #include #include #include //Initialize OpenGL void init(void) {
我有一系列的点,我将把它们变成图表上的一条线。我想要的是给图表下方的区域进行渐变填充。它看起来有点类似于这样的彭博图表; 我的问题实际上分为三个部分; 首先,我应该如何只填充图表下方的区域? 第二,如
我正在尝试根据数组中保存的数据绘制折线图。我已经成功绘制了 X 轴和 Y 轴。然而,当我在图表上绘制带有数据的线时,它与 X 轴和 Y 轴值不对齐。我不确定如何解决这个问题。我已经展示了下面的代码:
我有一个对象 DataEntry 定义如下: public class DataEntry { private long timestamp; private double value; public
我正在使用 MPAndroidChart-v2.1.6,我面临以下问题。 当我有一个数据条目时,它开始在 X 轴上显示从 0 索引开始的值。这就是它的样子。 当我只有一个数据输入时,我希望它居中对齐,
我有一个 pandas 数据框,看起来像这样 - Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Marks 0 30 31 29 1
enter image description here嗨, 我正在尝试重新创建我们看到的一些 covid-19 图表。我正在使用来自约翰霍普金斯大学数据库的数据。 数据的排列方式是城市名称在行中,列
我正在使用 Pandas 来绘制一些数据。 如果我绘制这个: import pandas as pd import matplotlib.pyplot as plt df = pd.DataFrame
当我使用 Seaborn 在同一轴上绘制多个线图时,不会创建任何图例。即使我在 sns.lineplot 中为图例提供参数“brief”或“full”,也不会显示任何内容,并且调用 ax.get_le
根据 Shanes 优秀 solution另一个问题,我现在意识到我不知道该怎么做。 我最初的方法是使用融化数据(再次感谢 shane): dm1 <- melt(d[,c("Type","I.alt
我有一个多索引数据框,两个索引是 Sample 和 Lithology Sample 20EC-P 20EC-8 20EC-10-1 ... 20EC-43
我有一个关于 ggplot2 中的图例的问题。我设法在同一张图中绘制了三条线,并想添加使用三种颜色的图例。这是使用的代码 library(ggplot2) ## edit from original
我如何使用 seaborn 中的 lineplot 绘图功能来创建点之间没有连接线的绘图。我知道该函数称为 lineplot,但它具有合并所有具有相同 x 值的数据点并绘制单个均值和置信区间的有用功能
我如何使用 seaborn 中的 lineplot 绘图功能来创建点之间没有连接线的绘图。我知道该函数称为 lineplot,但它具有合并所有具有相同 x 值的数据点并绘制单个均值和置信区间的有用功能
我昨天发布了类似的内容,但什么也没得到。我今天花了几个小时解决问题,但没有取得任何进展。 我正在使用处理(语言)并尝试实现一种在两点之间绘制一条线的方法。 (我不想使用库的 line() 方法。) 我
我有一个如下所示的数据框 df: ind group people value value_50 1 1 5 100 1 1 2 2 90
我正在使用 seaborn.lineplot()创建一个像这样的线图(一条代表平均值的线,被一个代表标准的带包围): sns.lineplot(x="trial", y="rvalues", hue=
我有 jqplot 线图,其中 y 轴作为金额,x 轴作为日期。我需要详细说明将鼠标悬停在图表线上时显示的金额。如果有人知道请重播。谢谢.... 最佳答案 您尝试过荧光笔插件吗? http://www
我已经实现了折线图,并且运行良好。但对于某些值,该线不可见或被切断。我附上了截图。对于诸如 [Entry, x: 0.0 y: 0.0, Entry, x: 1.0 y: 0.0, Entry, x:
我正在尝试改编动画线图示例,来自:http://bl.ocks.org/benjchristensen/1148374 function draw(id, width, height, u
我是一名优秀的程序员,十分优秀!