National WeatherServiceからのデータの折れ線グラフを作成しようとしています。グラフのx軸には、文字列の時間値（ "today"、 "tonight"など）が表示されます。y軸はその日の高温である必要があります。
ただし、温度は表示されず、すべてのテキストがそれ自体に重なるように、x軸はすべて左揃えになっているようです。
コンソールエラーも発生します：
この行.attr("d", valueline);は次のエラーを生成します：
Error: <path> attribute d: Expected number, "MNaN,111.86440677…"
この行.call(d3.axisBottom(x).ticks(10))は次のエラーを生成します：
Error: <g> attribute transform: Expected number, "translate(NaN,0)".
Error: <path> attribute d: Expected number, "MNaN,6V0.5HNaNV6".
これが私のコードです。これは、いくつかのWebサイトから入手したサンプルのコードを組み合わせたものです。
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<div id="myChart"></div>
<style> /* set the CSS */
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400;
font-size: 24px;
}
</style>
<body>
<script>
// class to hold day data
let DayData = class {
constructor(name, high) {
this.name = name;
this.high = high;
}
}
let daysData = new Array();
var width = 0;
var height = 0;
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 60, left: 60},
width = 1000 - margin.left - margin.right, //460
height = 400 - margin.top - margin.bottom;
/*------------------------------------------------------*/
// get the data
/*------------------------------------------------------*/
d3.json("https://api.weather.gov/gridpoints/BOU/69,50/forecast",
function(resp) {
let data = resp['properties']['periods'];
console.log(data);
// structure the data
data.forEach(
function(day) {
dayData = new DayData(day.name, day.temperature);
daysData.push(dayData);
});
data = daysData;
// set the ranges
var x = d3.scaleBand().range(0, width);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) {
return x(d.name);
})
.y(function(d) {
return y(d.high);
});
// 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 + ")");
// scale the range of data
x.domain(data.map(function(d) {
return d.name
}));
y.domain([0, d3.max(data, function(d) {
return d.high
})]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the x Axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(10))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("Day");
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Temperature");
}); // end get json weather
</script>
</body>
助けてください、ありがとう。
.range()d3スケールのメソッドは、スケールの出力値を定義する配列を受け入れます。
この行で：
//set the ranges
var x = d3.scaleBand().range(0, width);
var y = d3.scaleLinear().range([height, 0]);
Yスケール範囲が正しく定義されているが、X範囲にが欠落しているため[ ]、配列が2つの無効なパラメーターになっていることに注意してください。スケールの出力が無効であるため、パスでNaNエラーが発生し、x軸が正しくレンダリングされません。
範囲を配列として宣言すると、エラーが修正されます。
var x = d3.scaleBand().range([0, width]);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加