我是一個編碼js和d3的新手，我有下面的代碼，我想在x軸上用陣列顯示日期而不是數字。 我嘗試了很多方法來顯示日期；大多數方法顯示的日期沒有行和資料，并在HTML控制臺中出現錯誤，說它無法讀取日期的資料型別，只允許數字。
。<!DOCTYPE html>
<meta charset="utf-8">/span>
<body>
</body>
<!--加載d3庫 -->
<script src="https://d3js. org/d3.v5.min.js"></script>
<script>
//2.使用保證金慣例做法
var margin = {top: 200, right: 300, bottom: 400, left: 300}。
, width = window.innerWidth - margin.left - margin.right //使用視窗的寬度。
, height = window.innerHeight - margin.top - margin.bottom; // 使用視窗的高度。
var parseDate = d3.timeParse("%Y-%m-%d") 。
// 8. 一個長度為N的物件陣列，每個物件都有鍵->；值對，鍵是 "y"，值是一個亂數。
var xdata = [
["2021-08-01",(d3.randomUniform(100)()。 toFixed(1)】。]
["2021-08-02",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-03",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-04",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-05",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-06",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-07",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-08",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-09",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-10",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-11",(d3.randomUniform(100) ())。 toFixed(1)] 。
];
var n = xdata.length;
var max_value = 0;
var col1 = 0;
for (let i = 0; i < n; i ) {
xdata[i][0] = parseDate(xdata[i][0]) 。
//console.log(xdata[i][0]);/span>
col1 = parseFloat(xdata[i][1] )
if (col1 > max_value)
max_value = col1
}
console.log（max_value）。
//5.X尺度將使用我們資料的索引。
var xScale = d3.scaleLinear()
.domain([0,n-1 ]) // input.
.range([0, width]); //output
//6. Y刻度將使用隨機生成的數字。
var yScale = d3.scaleLinear()
.domain([0, max_value]) // input
.range([height, max_value]); // output
//7. d3的線條生成器。
var line = d3.line()
.x(function(d, i) { return xScale(i); }) //設定線條生成器的x值。
.y(function(d) { return yScale(d。 y); }) //設定直線生成器的y值。
.curve(d3.curveMonotoneX) //對線條進行平滑處理。
//var dataset = d3.range(n).map(function(d) { return {"y": (d3.randomUniform(100)()).toFixed(1) })。})
var dataset = xdata.map（function（d）{
return {
x: parseDate(d[0]) 。
y: d[1]
};
});
//1.將SVG添加到頁面并采用#2。
var svg = d3.select("body").append("spvg")
.attr("width", width margin.left margin.right)
.attr("height", height margin.top margin.bottom)
.append("g"/span>)
.attr("transform", "translate(" margin. left "," margin.top "）"）。)
//3.在一個組標簽中呼叫x軸。
svg.append("g")
.attr("class", "X axis")
.attr("transform", "translate(0," height )")
.call(d3.axisBottom(xScale)); //用d3.axisBottom創建一個軸組件。
//4.在一個組標簽中呼叫y軸。
svg.append("g"/span>)
.attr("class", "y軸")
.call(d3.axisLeft(yScale)); //用d3.axisLeft創建一個軸組件。
//9. 附加路徑，系結資料，并呼叫線條生成器。
svg.append("path"/span>)
.datum(dataset) // 10. 將資料系結到行中
.attr("fill"/span>, "none")
.attr("stroke", "鋼藍色")
.attr("stroke-width", 3)
.attr("d", line); //11. 呼叫線條生成器。
//12. 為每個資料點添加一個圓圈。
svg.selectAll(".dot"/span>)
.data(dataset)
.enter().append("circle") //使用 enter().append() 方法。
.style("fill","steelblue")
. attr("cx"/span>, function(d, i) { return xScale（i） })
. attr("cy", function(d) { return yScale(d。 y) })
.attr("r", 5) 。
// 13. 在每個資料點上添加資料文本。
svg.selectAll(".text"/span>)
.data(dataset)
.enter().append("text")
.style("fill"/span>, "red")
. attr("x"/span>, function(d, i) { return xScale(i) - 5 })
. attr("y", function(d) { return yScale(d。 y) - 20 })
.text(function(d) { returnd.y }) 。
</script> 提前感謝您的回答
uj5u.com熱心網友回復：我建議立即將字串決議為Date物件，然后使用d3.scaleTime進行x刻度。下面是一個例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">/span>
<script src="https://d3js. org/d3.v7.js"></script>
</head>
<body>
<div id="圖表"> </div>>
<script>
//設定
const margin = { top: 40, bottom: 40, left: 40, right: 40 };
const width = 500 - margin.left - margin.right;
const height = 250 - margin.top - margin.bottom;
const svg = d3.select('#chart')
.append('svg')
.attr('width', width margin.left margin.right)
.attr('height', height margin.top margin.bottom) 。
const g = svg.append('g')
.attr('transform', `translate(${margin. left},${margin.top})`）。)
// data
const parseDate = d3.timeParse("%Y-%m-%d"/span>)。
const dataset = [
["2021-08-01",(d3.randomUniform(100)()。 toFixed(1)】。]
["2021-08-02",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-03",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-04",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-05",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-06",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-07",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-08",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-09",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-10",(d3.randomUniform(100) ())。 toFixed(1)】。]
["2021-08-11",(d3.randomUniform(100) ())。 toFixed(1)] 。
].map(d => ({ date: parseDate(d[0]), value: parseFloat(d[1] ) })。
const minMaxDate = d3.extent(dataset, d => d.date)。
const maxValue = d3.max(dataset, d => d.value) 。
// scale
const x = d3.scaleTime()
.domain(minMaxDate)
.range([0, width] )。
const y = d3.scaleLinear()
.domain([0, maxValue] )
.range([height, 0] ）。)
//line generator
const line = d3.line()
.x(d => x(d.date)
.y(d => y(d.value)
.curve(d3.curveMonotoneX) 。
//軸
g.append("g"/span>)
.attr("class", "X axis")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))。
g.append("g")
.attr("class", "y軸")
.call(d3.axisLeft(y))。
// line
g.append('path')
.datum(dataset)
.attr('fill'/span>, 'none')
.attr('stroke', 'steelblue')
.attr('stroke-width', 3)
.attr('d', line)。
// circles(span class="hljs-string">'d', line)
g.selectAll('.dot')
.data(dataset)
.join('圓')
.attr('fill', 'steelblue')
.attr('cx', d => x(d. date)
.attr('cy', d => y(d. value)
.attr('r', 5) 。
//text labels[/span
g.selectAll(' .text')
.data(dataset)
.join('text')
.attr('fill', 'red')
.attr('x', d => x(d. date) - 5)
.attr('y', d => y(d. value) - 20)
.text(d => d.value) 。
</script>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/320657.html
標籤：
上一篇：D3散點圖熱管理域和范圍正確嗎？