d3.js - d3js 显示轴和图例有问题
问题描述
我遇到了图例框的问题,它只是拒绝在 CSS 中设置样式。
此外,x 轴和 y 轴的线突然停止显示,我无法理解原因。
我的代码可在https://codepen.io/gladiator_kris/pen/eYpNgJQ?editors=0010获得
//legend
var array = [];
for (var i=1; i<=11; i++){
array.push(minTemp + diff*i);
};
var legendContainer = svg.append("rect")
.attr("class", "legend")
.attr("id", "legend")
.attr("width", 300)
.attr("height", 60)
.attr('transform', `translate(${padding.left}, ${height-padding.bottom+30})`)
const legendScale = d3.scaleLinear()
.domain(array)
.range(gradientt);
const legendXaxis = d3.axisBottom(legendScale).tickFormat(d3.format("+.1f"))
const axisLegend = d3.select("#legend").append("g")
.call(legendXAxis)
const legendrect = d3.select("#legend").selectAll("rect")
.data(gradient)
.enter()
.append("rect")
.attr("width",20)
.attr("height",20)
.attr("x",0)
.attr("y",0)
.style("fill", (d) => d)
解决方案
推荐阅读
- java - 库、“注入工厂”和扩展库的最佳实践
- c# - 使用 MathNet 库沿三次样条插值
- laravel - Laravel 和 MongoDB 登录连接错误“找不到合适的服务器”(在本地服务器上中断,在产品上工作)
- io - 可以在控制台输入上 deno emmit 事件吗?
- windows - 使用未解析的变量或脚本参数创建脚本(如“%~dp0”)
- vue.js - 如何在 vue 模板中使用异步功能?
- r - 在 geom_text() 的分组文本中插入返回
- html - HTML - 一个溢出的、相对定位的子元素在它的父元素中创建了额外的空间
- python - 如何从 Kivy 的 ScreenManager 访问 id 并通过主应用程序类处理它们?
- php - 无法在非身份验证应用程序中显示会话变量