javascript - 在 D3 中对每个矩形和文本进行分组

Question

我正在使用 d3.js 创建条形图。在每个栏的顶部，我将显示一些文本。当用户将鼠标悬停在栏上时，它应该显示文本。当他们悬停时，文本将消失。为此，我需要将 <text> 分组和 <rect> <g> 中的元素元素。

示例

<g class="gbar">
    <rect x="0" y="50" width="10" height="50" />
    <text x="15" y="40">A</text>
</g>
<g class="gbar">
    <rect x="11" y="75" width="10" height="25" />
    <text x="16" y="65">B</text>
</g>
<g class="gbar">
    <rect x="22" y="25" width="10" height="75" />
    <text x="27" y="35">C</text>
</g>

所以这样，我可以做 .gbar:hover rect, .gbar:hover text { ... }改变 <rect> 的颜色和不透明度的 CSS 样式和 <text>元素。对于每个数据项，我怎样才能把 <rect>和 <text> <g> 中的元素使用 d3.js 的元素？

谢谢

编辑:要添加更多上下文，这是我目前所拥有的...

var svg = d3.select('.mygraph')
            .append('svg')
            .attr('height', 100);

svg.selectAll('rect')
   .data(dataSet)
   .enter()
   .append('rect')
   .attr('x', calcX)
   .attr('y', calcY)
   .attr('width', 10)
   .attr('height', calcH);

svg.selectAll('text')
   .data(dataSet)
   .enter()
   .append('text')
   .text(function (d) {
       return d.Text;
   })
   .attr('x', textX)
   .attr('y', textY);

该代码产生:

<svg>
    <rect x="0" y="50" width="10" height="50" />
    <rect x="11" y="75" width="10" height="25" />
    <rect x="22" y="25" width="10" height="75" />
    <text x="15" y="40">A</text>
    <text x="16" y="65">B</text>
    <text x="27" y="35">C</text>
</svg>

我对 d3.js 还是很陌生。

Answer 1

这是标准方法。

首先，附加 <g>使用“输入”选择的元素:

var groups = svg.selectAll(".groups")
    .data(dataset)
    .enter()
    .append("g")
    .attr("class", "gbar");

然后，使用该选择附加您的矩形和文本:

groups.append('rect')
    .attr('x', calcX)
    .attr('y', calcY)
    .attr('width', 10)
    .attr('height', calcH);

groups.append('text')
    .text(function (d) {
        return d.Text;
    })
   .attr('x', textX)
   .attr('y', textY);

这样做，您的矩形和文本将每一对位于相同的 <g> 内。元素。

这是一个简单的演示(一个非常简单的代码，充满了魔数(Magic Number))。将鼠标悬停在条形图或文本上:

var data = d3.range(8).map(()=>~~(Math.random()*130));

var svg = d3.select("svg")

var groups = svg.selectAll(".groups")
	.data(data)
	.enter()
	.append("g")
    .attr("class", "gbar");
	
groups.append("rect")
	.attr("x", (d,i)=> i*40)
	.attr("width", 20)
	.attr("y", d=> 150 - d)
	.attr("height", d=> d)
	.attr("fill", "teal");
	
groups.append("text")
	.attr("x", (d,i)=> i*40)
	.attr("y", d=> 145 - d)
	.text(d=>d)

.gbar:hover rect{
  fill:brown;
  }

.gbar:hover text{
  fill:brown;
  font-weight:700;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

如果您检查此代码段创建的 SVG，这就是您得到的:

<g class="gbar">
    <rect x="0" width="20" y="142" height="8" fill="teal"></rect>
    <text x="0" y="137">8</text>
</g>
<g class="gbar">
    <rect x="40" width="20" y="136" height="14" fill="teal"></rect>
    <text x="40" y="131">14</text>
</g>
<g class="gbar">
    <rect x="80" width="20" y="89" height="61" fill="teal"></rect>
    <text x="80" y="84">61</text>
</g>
//etc...