时间戳

首页 > 解决方案 > 基于另一个值的d3树图中的颜色渐变

d3.js - 基于另一个值的d3树图中的颜色渐变

问题描述

我正在尝试查看是否可以使用 d3 完成树形图，其中框的大小基于值 a，该框的颜色基于值 b。我看到这个例子https://observablehq.com/@d3/treemap

但是任何使用两个值的例子都会受到赞赏。谢谢

标签： d3.jsobservable

解决方案

使用叶子的父节点定义规模的域：

color = d3.scaleOrdinal()
.domain(treemap(data).leaves().map(d => {return d.parent.data.name}))
.range(d3.schemeCategory10)

并使用范围中相应的颜色渐变填充叶节点，由数据值索引，应用于 opacity 属性：

.attr("fill", d => { return color(d.parent.data.name) })
.attr("fill-opacity", d => { 
        let min = d3.min(root.leaves().map(leaf => leaf.data.value))
        let max = d3.max(root.leaves().map(leaf => leaf.data.value))
        return (d.data.value-min)/(max-min)  
      })

您只有 3 种颜色，因为您只有 3 个父节点，但颜色对应于文档中的颜色

查看示例

根据评论编辑

推荐阅读