我有一个代码使用d3 v6.7.0,它设置了一个如下的比例:

const range = [0, 828.156];
const domain = [[300,1],[300,2],[300,3],[400,1],[400,2],[400,3],[400,4]]
const scale = d3.scaleBand()
  .domain(domain)
  .range(range);

// test 1: this works in both v6 and v7
const a = domain[3];
console.log('array a', a);
console.log('scaled a:', scale(a));

// test 2: declaring a new, identical array to the one above, 
// also works in v6
const b = [400, 1];
console.log('array b', b);
console.log('scaled b:', scale(b));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js" integrity="sha512-cd6CHE+XWDQ33ElJqsi0MdNte3S+bQY819f7p3NUHgwQQLXSKjE4cPZTeGNI+vaxZynk1wVU3hoHmow3m089wA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

在d3 v7.9.0中,这不再适用:

const range = [0, 828.156];
const domain = [[300,1],[300,2],[300,3],[400,1],[400,2],[400,3],[400,4]]

const scale = d3.scaleBand()
  .domain(domain)
  .range(range);

// test 1: this works in both v6 and v7
const a = domain[3];
console.log('array a', a);
console.log('scaled a:', scale(a));

// test 2:  declaring a new, identical array to the one above, 
// does not work in v7, but it does work in v6
const b = [400, 1];
console.log('array b', b);
console.log('scaled b:', scale(b));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

从v6到v7有什么变化吗?或者我做错了什么?

推荐答案

D3 v7使用InternMap:

有序zoom 现在对域使用InternMap;域值现在通过object.valueOf强制到原始值而不是通过object.toString强制到字符串来实现.

在v6中,域将被强制使用object.toString:

console.log([400,1].toString() === [400,1].toString())

在V7中,使用object.valueOf:

console.log([400,1].valueOf() === [400,1].valueOf())

Javascript相关问答推荐

我的YouTube视频没有以html形式显示,以获取免费加密信号

脚本.js:3:20未捕获的类型错误:无法读取空的属性(读取addEventHandler)

主要内部的ExtJS多个子应用程序

在分区内迭代分区

materialized - activeIndex返回-1

zoom svg以适应圆

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

我应该绑定不影响状态的函数吗?'

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

VUE 3捕获错误并呈现另一个组件

如何发送从REST Api收到的PNG数据响应

基于props 类型的不同props ,根据来自接口的值扩展类型

MongoDB受困于太多的数据

用于部分字符串的JavaScript数组搜索

处理app.param()中的多个参数

判断函数参数的类型

在SuperBase JS客户端中寻址JSON数据

如何在独立的Angular 应用程序中添加Lucide-Angel?

我如何才能让p5.js在不使用实例模式的情况下工作?

react :图表负片区域不同 colored颜色