javascript - 如何在 D3 中附加多个矩形?
问题描述
我想知道是否可以为每个数据点附加多个矩形。在我的示例中,有三个数据点。对于每个我尝试创建 2 个矩形。最后必须有6个矩形。3个红色,3个蓝色。 图片
根据this answer,我尝试了以下解决方案:
var svg = d3.select("body").append("svg");
svg.selectAll("rect")
.data([10,60,120])
.enter()
.append("g")
.append("rect")
.attr("width", 20)
.attr("height", 20)
.attr("x", 20)
.attr("y", function(d) {return d})
.attr("fill", "red")
.selectAll("rect")
.data(function(d) { return d3.range(d); })
.enter()
.append("rect")
.attr("width", 20)
.attr("height", 20)
.attr("x", 60)
.attr("y", function(d) {return d})
.attr("fill", "blue");
不幸的是,蓝色矩形是在红色矩形内创建的。知道如何实现这一目标吗?这是一个示例
解决方案
您成功地创建了额外的矩形,但不幸的是它们都嵌套在前三个矩形内。如果您的浏览器上有 Web 开发人员扩展程序,请选择其中一个矩形,然后查看源代码以查看。
如果要附加矩形,而不是将它们嵌套在原始矩形内,则需要将两个矩形都附加到g
节点上。当您绑定数据并添加g
节点时,将这些节点分配给一个变量:
var svg = d3.select("body").append("svg");
var nodes = svg.selectAll(".rect")
.data([10,60,120])
.enter()
.append("g")
.classed('rect', true)
然后您可以将两个矩形附加到g
节点:
// red rectangles
nodes.append("rect")
.attr("width", 20)
.attr("height", 20)
.attr("x", 20)
.attr("y", function(d) {return d})
.attr("fill", "red")
// blue ones
nodes.append("rect")
.attr("width", 20)
.attr("height", 20)
.attr("x", 120)
.attr("y", function(d) {return d})
.attr("fill", "blue")
请注意,如果您这样做:
var nodes = svg.selectAll("rect")
.data([10,60,120])
.enter()
.append("g")
.append("rect")
.attr("width", 20)
.attr("height", 20)
.attr("x", 20)
.attr("y", function(d) {return d})
.attr("fill", "red")
nodes
将是对rect
元素的引用,因为它们是最后添加的东西,并且任何附加到的东西都nodes
将添加到rect
元素中。
另请注意,您只需将数据绑定到g
元素一次;g
它被这些元素的所有子节点自动继承。
这是完整的示例:
var svg = d3.select("body").append("svg");
var g = svg.selectAll(".rect")
.data([10,60,120])
.enter()
.append("g")
.classed('rect', true)
g.append("rect")
.attr("width", 20)
.attr("height", 20)
.attr("x", 20)
.attr("y", function(d) {return d})
.attr("fill", "red")
g.append("rect")
.attr("width", 20)
.attr("height", 20)
.attr("x", 120)
.attr("y", function(d) {return d})
.attr("fill", "blue")
<script src="https://d3js.org/d3.v5.js"></script>
推荐阅读
- reactjs - 状态变量显示值“未定义”,但已设置默认值“假”
- azureservicebus - WebJobs 和服务总线触发函数 - 性能注意事项
- swift - 如何处理失败的可选绑定
- python - 在默认 Django 表单中添加单选按钮:
- ios - 在 iOS 中处理另一个任务时呈现视图
- browser - BrowserComponent 产生 NullPointerException
- mysql - 我可以在 MySQL 中使用什么来代替 CASE WHEN THEN?
- reactjs - 从 React.js 转换为 React.tsx 属性 'id' 不存在于类型 'never' 上。TS2339
- html - 媒体查询停止覆盖?
- dart - 如何在 Dart 中建模递归结构