我正在使用 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 还是很陌生。
最佳答案
这是标准方法。
首先,附加 <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...
关于javascript - 在 D3 中对每个矩形和文本进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41193617/