私はD3jsの新しい人で、助けが必要です...私の仕事は為替レートのグラフを描くことです
.txtファイルに次のようなデータがあります。
date,value
2020-12-31,38.43
2020-12-08,35.43
2020-12-04,35.839
2020-10-21,36.222
2020-08-04,38.834
2020-06-04,39.562
2020-04-04,37.832
2020-03-12,38.834
2020-02-08,36.723
2020-01-04,37.834
私のJSコードは次のとおりです：（euroFileName = "euro.txt"-データファイルへのパス）
let eMargin = {top: 10, right: 30, bottom: 30, left: 30},
eWidth = 800 - eMargin.left - eMargin.right,
eHeight = 400 - eMargin.top - eMargin.bottom;
let svg2 = d3.select("#euroChart")
.append("svg")
.attr("width", eWidth + eMargin.left + eMargin.right)
.attr("height", eHeight + eMargin.top + eMargin.bottom)
.append("g")
.attr("transform",
"translate(" + eMargin.left + "," + eMargin.top + ")");
d3.csv(euroFileName,
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
function(data) {
//Only last year data
let dateCurrent = Date.now()
data = data.filter(function(d){return d.date >= dateCurrent - (365 * 24 * 3600 * 1000)})
// X Axis
let now = new Date();
let x = d3.scaleTime()
.domain([now - (365 * 24 * 3600 * 1000), d3.max(data, function(d) { return d.date; })])
.range([ 0, eWidth ]);
svg2.append("g")
.attr("transform", "translate(0," + eHeight + ")")
.call(d3.axisBottom(x));
// Y Axis
let y = d3.scaleLinear()
.domain([d3.min(data, function(d) { return +d.value; })-2, d3.max(data, function(d) { return +d.value; })])
.range([ eHeight, 0 ]);
svg2.append("g")
.call(d3.axisLeft(y));
svg2.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
}
)そしてそれはうまく機能していました...しかし!!! 次に、データを別のロケールデータ形式に変更する必要があります。そして今、私はこのようになりました：
date;value
31.12.2020;31,13
21.05.2020;31,13
03.04.2020;31,13
05.11.2020;31,13
16.10.2020;31,13
29.05.2020;31,13
30.12.2020;31,13
あなたはすでに要点を理解していると思いますが、発表します：D3jsに新しい形式のデータを認識させるにはどうすればよいですか？私はhttps://d3js.org/d3.v4.jsを使用しています。要点は次の行にあるようです。
defaultLocale({
decimal: ".",
thousands: ",",
grouping: [3],
currency: ["$", ""]
});しかし、私はそれで何ができるかわかりません...
PSデータの並べ替えについて心配する必要はありません。別のPHPスクリプトで行われます。私はすべてのデータ\コード（localhost）に完全にアクセスできます
助けていただければ幸いです！
D3.csvは、セミコロン（;）で区切られたデータでは機能しません。データを取得するには、別の方法を使用する必要があります。幸い、d3.dsvを使用して区切り文字で区切られた値を解析する場合は、任意の区切り文字を使用できます。d3v5またはv6を使用している場合は、もう少し簡単です。
区切り文字としてコンマをセミコロンに置き換えた場合は、d3.csvの代わりに次を使用できます。
D3 v5およびv6：
d3.dsv(";", "file.dsv").then(function(data) {
// ... do something with data
})
行関数を追加するには、それを3番目のパラメーターとしてd3.dsvに渡すだけです。
function row(d){
return { date : d3.timeParse("%d.%m.%Y")(d.date), value : d.value }
}
d3.dsv(";", "file.dsv",row).then(function(data) {
// ... do something with data
})
d3v3およびv4以前では、次のものを使用できます。
var dsv = d3.dsvFormat(";");
d3.request("test.dsv")
.mimeType("text/plain")
.response(function(data) { return dsv.parse(data.response) })
.get(function(data) {
// ... do something with data here
console.log(data);
});
提案された編集と質問のコードに基づいて、行関数があるように見えます。上記のv3 / 4関数で行関数を使用するには、次を使用します。
function row(d){
return { date : d3.timeParse("%d.%m.%Y")(d.date), value : d.value }
}
let dsv = d3.dsvFormat(";");
d3.request(dollarFileName)
.mimeType("text/plain")
.response(function(data) { return dsv.parse(data.response, row) })
.get(function(data) { ....
// use data.
})
これらを使用すると、データを解析できます。これは、表示されているロケール情報であるその表現とは関係ありません。ロケール情報は、d3が区切り文字で区切られた値を解析する方法に影響を与えたり変更したりすることはありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加