Javascript D3.js：如何根据树状图中每个内容的大小来决定每个正方形的面积和颜色？

我在树地图上遇到了一个问题。我有一个很像这样的例子：

您可以从演示中看到，树形图中每个正方形的面积由内容大小决定。然而，每个正方形都有相同的颜色。因此，我计划添加一个功能：为每个正方形添加不同的阴影，这也可以由内容大小决定。此外，您还可以尝试在此链接中修复：

我的解决方案是将每个正方形的颜色编码样式和每个大小绑定在一起，然后它们可以显示不同的色调，就像

`.style("background-color", function(size) { return rgb() or something......})`

---

提前谢谢

只需关注您的原始问题，即如何根据数据制作填充颜色：

您需要的是一个函数，用于将数字数据值（与树形图矩形大小相关联的值）转换为颜色值，从而使颜色在表示数据极值的两个极值之间形成平滑过渡

如果不这样做，它们的目的是为对比度创建不同的颜色值

要创建与数据的线性关系，您需要一个线性比例来将数据值转换为颜色函数的适当范围，然后您需要一个函数来创建根据该数字变化的实际颜色值

d3中有三组功能可产生颜色变化：

• 当您为颜色属性指定转换时，内部使用的将使用开始颜色和结束颜色进行初始化，并返回一个函数，该函数将取0和1之间的值，并返回开始值和结束值之间适当距离的颜色

• 将三个数字作为RGB、HSL或L*a*b颜色定义，并返回十六进制值；您可以使用线性比例指定这些数字中的任何一个，以创建仅改变一个维度（色调、亮度、红色等）的颜色比例

• 使用一个颜色值初始化，然后可用于创建对其的修改。但是，它们只能修改亮度，不能修改色调

颜色插值函数更灵活，所以我建议使用它。根据您是希望插值根据RGB颜色空间还是HSL或L*a*b颜色空间而变化，有不同的版本。我建议使用HSL进行直观过渡，不会偏离可见颜色

同样，插值函数期望值介于0和1之间，因此需要使用线性比例将数据值转换为该范围

var colourScale = d3.scale.linear()
                    .domain([0, maxArea])
                    .range([0,1]);
var colourInterpolator = d3.interpolateHsl("blue", "red") 
               //colours can be specified as any CSS colour string

function colourFunction(d) {
    return colourInterpolator( colourScale( d.area ) );
}

/* and then later */
rect.attr("fill", colourFunction);

---

如果矩形的面积等于最大值，则比例会将其转换为值1，颜色插值器会将其转换为过渡的最终颜色红色。如果面积几乎为零，则比例值几乎为零，颜色几乎为蓝色。

您可以使用比例设置背景颜色，但不会看到嵌套的矩形。仅供参考，Bill White在自定义树形图方面做了一些工作，还有指向代码的链接。@Larskothoff我认为

parent

矩形应该是透明的，只是用来收集鼠标点击。我认为是子矩形被着色了。不过，必须更改悬停效果，以便更改父对象的不透明度（即，更改为部分透明的黑色），而不是更改子对象的颜色。是的，您确实帮了我很多忙，顺便说一下，正确的函数应该是：

d3.interpolateHsl（）

，而不是

d3.interpolateHsl（）

。哈哈！顺便说一下，我遇到了另一个问题，这和这个问题是一样的，我认为答案不对，你能帮我检查一下吗？更正了方法名。大写模式与正常用法冲突的情况之一。没错，该解决方案是正确的，但它有一个错误的方法名称！顺便说一下，我刚刚提醒我，你不需要用两个天平。将线性比例的范围值设置为颜色值将自动在内部触发颜色插值，尽管它将使用RGB插值，而不是HSL。