个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在引用这两篇文章在 d3 中制作树状图:
我正在使用这样的简单数据进行测试:
country, numbers
US, 100
UK, 50
Germany, 30
France, 20
我已经设法渲染了树状图，但每个矩形的大小看起来非常相似。
我想制作每个大小的矩形来表示它的值。例如，美国的矩形是最大的，英国的矩形是其值 50 的最大。
你能告诉我如何解决吗？
这是我的代码:
<!doctype html>
<html>
<meta charset = "utf-8">
<head>
<style>
.rect {
fill: cadetblue;
opacity: 0.3;
stroke: white;
}
</style>
</head>
<body>
<svg width="900" height="600">
<g></g>
</svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.csv("practice_numberOnly.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.country = d.country;
d.numbers = +d.numbers;
})
var nest = d3.nest()
.key(function(d) { return d.country; })
.rollup(function(d) { return d3.sum(data, function(d) { return d.numbers; }); });
var treemapLayout = d3.treemap()
.size([700, 500])
.paddingOuter(10);
var root = d3.hierarchy({values: nest.entries(data)}, function(d) { return d.values; })
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value ; });
treemapLayout(root);
d3.select('svg g')
.selectAll('rect')
.data(root.descendants())
.enter()
.append('rect')
.attr("class", "rect")
.attr('x', function(d) { return d.x0; })
.attr('y', function(d) { return d.y0; })
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; });
});
</script>
</body>
</html>
最佳答案
如果您记录嵌套数据，您会发现数组中每一项的值都相等，因此表示的区域将相等:
console.log(nest.entries(data) // [{"key": "US","value": 200},{"key": "UK","value": 200},{"key": "Germany","value": 200},{"key": "France","value": 200}]
这不是输入数据，但它来自这一行:
.rollup(function(d) { return d3.sum(data, function(d) { return d.numbers; }); });
这里我们分配了所有数据的数字的总和，而不是基于键，因为我们传递了整个数据集d3.sum()，数据。
相反，我们只想对数据共享指定键(下面的values)的值求和，所以我们想使用:
var nest = d3.nest()
.key(function(d) { return d.country; })
.rollup(function(values) { return d3.sum(values, function(value) { return value.numbers; }); });
结果如下:
var data = [
{country:"US",numbers:100},
{country:"UK",numbers:50},
{country:"Germany",numbers:30},
{country:"France",numbers:20}
];
data.forEach(function(d) {
d.country = d.country;
d.numbers = +d.numbers;
})
var nest = d3.nest()
.key(function(d) { return d.country; })
.rollup(function(values) { return d3.sum(values, function(value) { return value.numbers; }); });
var treemapLayout = d3.treemap()
.size([700, 500])
.paddingOuter(10);
var root = d3.hierarchy({values: nest.entries(data)}, function(d) { return d.values; })
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value ; });
treemapLayout(root);
d3.select('g')
.selectAll('rect')
.data(root.descendants())
.enter()
.append('rect')
.attr("class", "rect")
.attr('x', function(d) { return d.x0; })
.attr('y', function(d) { return d.y0; })
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; });.rect {
fill: cadetblue;
opacity: 0.3;
stroke: white;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="900" height="600">
<g></g>
</svg>关于javascript - d3 treemap 使每个矩形大小代表它的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52099453/
26
4
0
我读过很多关于红黑树的文章，其中操作需要 O(log n) 时间。我不太清楚它是如何工作的，以及与二分搜索相比， TreeMap 实际上如何使用红黑树算法来平衡树树。 引用链接 https://www
我正在尝试实例化 TreeMap使用Comparator应该能够访问所述 TreeMap ，即它将用于的那个(我猜“将”一定正是问题所在......): final Map map = new Tre
这很好用: TreeMap x_probs_org = new TreeMap(); 但是这个: TreeMap > x_probs = new >(); 导致以下错误: error: expec
我正在尝试模拟生产系统。为了简要解释我打算做什么，我将创建一个面板，其中有一些表来保存值(用于几个工作站和作业类型的属性(见下图))。当我运行它时，这些值应该被存储以供进一步处理。 在上一个问题中，有
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 7 年前。 Improve th
大家好，我是 highcharts 的新手。因为在 TreeMap 中只显示系列名称而不显示值。工具提示中显示的名称和值。但我想在 TreeMap 中显示名称和值。请知道的人回复我。 var seri
Java 8 的新手，我无法弄清楚这一点。我有两张类型为 TreeMap 的 map , 一个叫做 patternMap和另一个answerMap . patternMap被硬编码以寻找键值对的特定模
我对 map 还很陌生，而且我很困惑。我有以下 TreeMap : TreeMap> routes = new TreeMap>(); 例如，我的 TreeMap 填充如下: {A={B=10,
这对我来说似乎太棘手，无法正确执行此操作。 我有一个TreeMap ，我正在获取其中的子图: public static reqObj assignObj(reqObj vArg, i
我需要你的帮助，我不明白发生了什么？ 我试图在两个 Activity 之间发送一个 TreeMap，代码是这样的: class One extends Activity{ public void s
我们在一个方法中定义了一个新的 TreeMap 并将其传递给另一个方法: TreeMap aTreeMap = new TreeMap(); //call another method to doSo
我认为 C++ std::map.lower_bound 等于 java 的 TreeMap.higherEntry。C++ std::map 中 java 的 TreeMap.lowerEntry
作为最佳实践， float 的集合类型实例不应超过一个。例如，Nil 是 scala 库中的一个 case 对象。 但是， TreeMap 和 TreeSet 在每次 empty() 调用时都会创建一
我有更新点燃缓存记录的代码逻辑， 缓存定义为: IgniteCache> txInfoCache; 键是缓存类型字符串，对于值我使用TreeMap来保持记录有序(我需要对数据进行排序)，但是更新所用的
我有一个自己的扩展 TreeMap，名为 MyTreeMap，它用于根据作为参数 MyTreeMap 传递的 DAO 动态创建 TreeMap。还，Hazelcast 提供了自己的 TreeMap，我
我想以树的形式可视化马赛克图。例如 mosaicplot(~ Sex + Age + Survived, data = Titanic, color = TRUE) 现在我想要的是以树的形式表示它，其
我正在尝试使用 R 包树状图创建一个树状图，该树状图类似于包中示例中的树状图。 library(treemap) data(GNI2010) treemap(GNI2010, index=c(
如何捕获最后一个节点的点击事件？ 我按照本教程(http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022)制作了树状图。在我的目的中，我想让最后一个节点可点击，然
我有一个 2 级的 highchart TreeMap ，用于显示股票市场的价格，每个部分的值(value)几乎每秒钟都在变化，我想更新每个部分的值，但正如我所见在 highchart 中，我们可以通
我想存储元素的 ID 及其对应的坐标。为此，我使用了一个 TreeMap，其中 Coordinates 是一个包含 int x 和 int y 的类。现在，为了将数据插入 map ，我可以这样写: t
我是一名优秀的程序员,十分优秀！