Question

我正在d3 v5中创建一个条形图，并试图在每个条形图内添加标签（该图是水平的）。

当前，每个栏都包含在<g>元素中。我的数据集中有多个元素（这些是具有名称和值的简单对象），所以当我这样做时：

g.selectAll('text').data(dataset).enter().append('text')

将

N个<text>元素添加到每个<g>中。相反，我希望每个<g>都有一个使用数据集中单个元素的标签。

可以使用d3完成此操作吗？我应该在其他地方执行此操作（例如，当我创建购物车的条形时）如何进行？

Answer 1

不确定g在您的帖子中来自何处。使用enter-update-exit，使用selectAll将数据绑定到表示数据项（<g>）的最外面的元素，然后在组选择上使用select传播绑定的数据物品送给（家）孩子。也许不是最好的类比，但是如果selectAll为您提供了一个数组，那么select将对其执行一个map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

    var data = [{
      c: 'green',
      l: "Green"
    }, {
      c: 'red',
      l: 'Red'
    }];
    
    var g = svg.selectAll("g")
    	.data(data);
    
    g.exit().remove();
    
    var newG = g.enter()
    	.append('g');
    
    newG.append('rect')
    	.attr('width', 100)
    	.attr('height', 40)
    	.style('fill', 'none');
    
    newG.append('text')
    	.attr('y', 30);
    
    // normally I'd reuse the initial `g` variable, but just for clarity
    var newGandUpdatedG = newG.merge(g);
    
    newGandUpdatedG.select('text')
    	.text(d => d.l);
    
    newGandUpdatedG.select('rect')
    	.style('stroke', d => d.c);
    
    newGandUpdatedG.attr('transform', (d,i) => `translate(${i * 120}, 0)`);
    	
    	
  </script>
</body>

d3-从数据集中为选择中的每个节点创建新元素

1 个答案: