我有一个 TreeMap 布局，想知道如何根据子矩形的值来控制它们的不透明度？但理想情况下，我希望每个 child 都有特定的填充，这样观众就能直观地看到哪个城市的癌症患者比例高于另一个城市，而不是自己创造一个传奇。目前，整个 TreeMap 设置为一种颜色。
提前抱歉直接在代码中输入数据，我还在学习基础知识。
干杯
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>TreeMap</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<svg width="1200" height="720">
<g></g>
<section class="container1">
<p class="p1"> North England </p><p class="p2"> South England </p>
<p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
<p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
<p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
<p class="p9"> Bristol </p><p class="p10"> Luton </p>
<p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
<object class="Box" class="cancer"></object>
</section>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var data = {
"name": "England",
"children": [
{
"name": "North England",
"children": [
{
"name": "Bradford City",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Leeds",
"children": [
{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.52,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.29,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.71,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.82,
"color": "#CC527A",
}
]
},
{
"name": "Liverpool",
"children": [
{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 5.90,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.71,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.70,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.88,
"color": "#CC527A",
}
]
},
{
"name": "Manchester",
"children": [
{
"name": "Cancer",
"value": 1.78,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 2.95,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.61,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.05,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
{
"name": "Sheffield",
"children": [
{
"name": "Cancer",
"value": 2.54,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 4.57,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.85,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.08,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
]
},
{
"name": "South England",
"children": [
{
"name": "Brighton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Bristol",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Luton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Milton Keynes",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color":"#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Southampton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
]
}
]
};
var treemapLayout = d3.treemap()
.size([1000, 600])
.paddingTop(20)
.paddingInner(8);
var rootNode = d3.hierarchy(data)
rootNode.sum(function(d) {
return d.value;
});
treemapLayout(rootNode);
var nodes = d3.select('svg g')
.selectAll('g')
.data(rootNode.descendants())
.enter()
.append('g')
.attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})
nodes
.append('rect')
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; })
.attr('opacity', function(d) { return 0.8 /* has to be like d.value / max or so */ })
.attr('fill', function(d) { if (d.data.color) {
return d.data.color
} else {
return "white"
}})
nodes
.append('text')
.attr('dx', 10)
.attr('dy', 8)
.text(function(d) {
return d.data.value;
});
</script>
</body>
最佳答案
您可以简单地指定一个不透明度属性，例如宽度或高度。只需返回一个函数并决定如何将您的值映射到百分比范围(实际上，您需要知道出现的最大值)。
.attr('opacity', function(d) { return d.value / 10 })
在您的代码中，这意味着如下:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Pack layout (with labels)</title>
</head>
<style>
rect {
stroke: white;
}
text {
font-family: "Helvetica Neue", Helvetica, sans-serif;
fill: black;
font-size: 8px;
text-anchor: end;
}
svg {
padding-left: 60px;
padding-top: 40px;
}
</style>
<body>
<svg width="1020" height="720">
<g></g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var data = {
"name": "North England",
"children": [
{
"name": "Bradford City",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "red",
},
{
"name": "CKD",
"value": 3.21,
"color": "green",
},
{
"name": "CHD",
"value": 2.57,
"color": "blue",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "yellow",
},
{
"name": "Strokes",
"value": 1.18,
"color": "gray",
}
]
},
]
};
var treemapLayout = d3.treemap()
.size([600, 400])
.paddingOuter(20);
var rootNode = d3.hierarchy(data)
rootNode.sum(function(d) {
return d.value;
});
treemapLayout(rootNode);
var nodes = d3.select('svg g')
.selectAll('g')
.data(rootNode.descendants())
.enter()
.append('g')
.attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})
nodes
.append('rect')
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; })
.attr('opacity', function(d) { return 0.5 /* has to be like d.value / max or so */ })
.attr('fill', function(d) { if (d.data.color) {
return d.data.color
} else {
return "white"
}})
nodes
.append('text')
.attr('dx', 4)
.attr('dy', 14)
.text(function(d) {
return d.data.name;
});
</script>
</body>更新:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>TreeMap</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<svg width="1200" height="720">
<g></g>
<section class="container1">
<p class="p1"> North England </p><p class="p2"> South England </p>
<p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
<p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
<p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
<p class="p9"> Bristol </p><p class="p10"> Luton </p>
<p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
<object class="Box" class="cancer"></object>
</section>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var data = {
"name": "England",
"children": [
{
"name": "North England",
"children": [
{
"name": "Bradford City",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Leeds",
"children": [
{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.52,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.29,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.71,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.82,
"color": "#CC527A",
}
]
},
{
"name": "Liverpool",
"children": [
{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 5.90,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.71,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.70,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.88,
"color": "#CC527A",
}
]
},
{
"name": "Manchester",
"children": [
{
"name": "Cancer",
"value": 1.78,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 2.95,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.61,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.05,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
{
"name": "Sheffield",
"children": [
{
"name": "Cancer",
"value": 2.54,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 4.57,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.85,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.08,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
]
},
{
"name": "South England",
"children": [
{
"name": "Brighton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Bristol",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Luton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Milton Keynes",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color":"#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Southampton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
]
}
]
};
var maxValues = {
"Cancer": 2.54,
"CKD": 5.9,
"CHD": 3.85,
"Diabetes": 12,
"Stroke": 2.13,
}
var treemapLayout = d3.treemap()
.size([1000, 600])
.paddingTop(20)
.paddingInner(8);
var rootNode = d3.hierarchy(data)
rootNode.sum(function(d) {
return d.value;
});
treemapLayout(rootNode);
var nodes = d3.select('svg g')
.selectAll('g')
.data(rootNode.descendants())
.enter()
.append('g')
.attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})
nodes
.append('rect')
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; })
.attr('opacity', function(d) { return d.value / maxValues[d.data.name] })
.attr('fill', function(d) { if (d.data.color) {
return d.data.color
} else {
return "white"
}})
nodes
.append('text')
.attr('dx', 10)
.attr('dy', 8)
.text(function(d) {
return d.data.value;
});
</script>
</body>关于javascript - 值控制的颜色不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48805510/