javascript - D3 JS中的折线图路径未正确显示
问题描述
我正在尝试通过此功能实现折线图。当我尝试添加路径时,没有单独显示路径。任何帮助,将不胜感激。(代码的最后 10 行添加了图形的路径)
function drawLineChart(country) {
console.log(countryValueMap[country])
var margin = {top: 60, right: 110, bottom: 50, left: 50},
width = 800 - margin.left - margin.right + 50,
height = 500 - margin.top - margin.bottom + 50;
// document.getElementById("my_dataviz").innerHTML = "";
const lineSvg = d3.select("#linechart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const x = d3.scaleTime()
.range([0 , width])
.domain([new Date(1958,0,1), new Date(2011,0,1)])
lineSvg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(5).tickFormat(d => d.getFullYear()))
const y = d3.scaleLinear()
.domain([0,countryMaxValueMap[country]])
.range([height, 0])
lineSvg.append("g")
.call(d3.axisRight(y).tickSize(width)).call(g => g.select(".domain")
.remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", "2,2"))
.call(g => g.selectAll(".tick text")
.attr("x", 4)
.attr("dy", -4));
lineSvg.append("path")
.datum(countryValueMap[country])
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.year) })
.y(function(d) { return y(d.gdp) })
)
}
当我尝试执行上述代码时,这是我得到的输出。
我尝试记录 d3.year 和 d3.gdp 的值,并且该变量工作正常。
解决方案
鉴于该行位于 1970 年(纪元时间的开始),您的数据中表示年份的方式似乎有问题。由于您使用的是scaleTime
,d.year
必须是日期对象。它不能只是代表年份的整数。
推荐阅读
- c++ - 为什么“on_read”和“on_write”关闭时间不同?
- python - 在此降水图上显示两个水平颜色条,导致大的空白区域
- python - 在 Pandas 数据框中排序和重命名列 - 优雅的解决方案可能吗?
- php - 将数据库设置存储在 .ENV 或主数据库中。对于具有多个数据库的 laravel,每个用户一个数据库
- web-services - nswag 生成的服务没有返回逻辑
- javascript - 文本操作:从剪贴板检测替换
- arrays - 如何以角度将数据从 API 接收到组件模型
- powerbi - 修改度量以仅影响矩阵表中的总计
- java - 为什么“while(Scanner.hasNext())”会在 java 中导致 OutOfMemoryError?
- node.js - mongoose 查询 搜索 全部