D3刻度与背景 [英] D3 tick with background
问题描述
D3轴如何能够具有背景颜色？
这样做的一种粗暴的方式在每个 g.tick 中附加 rect 元素，并且拥有填充在它上面，但是很难实现，因为 rect 必须与中的文本相同大小 ..
以下是
有人知道任何理智的方法在Ticks上有背景颜色？
感谢
我不会拒绝您的 rect 想法这么快。它很容易实现，并允许你调整背景的大小，但你想要的。下面是你的3个额外的像素：
d3.selectAll（。tick）。 ，i）{
var tick = d3.select（this），
text = tick.select（'text'），
bBox = text.node（）。getBBox b
$ b tick.insert（'rect'，'：first-child'）
.attr（'x'，bBox.x - 3）
.attr（'y' bBox.y - 3）
.attr（'height'，bBox.height + 6）
.attr（'width'，bBox.width + 6）
.style ，d3.schemeCategory20 [i％20]）;
}）;
完整示例：
<！DOCTYPE html>< meta charset =utf-8>< svg width =960height =500>< / svg>< script src =// d3js.org/d3.v4.min.js\">t;/script><script>var svg = d3.select（svg），margin = {top：20，right：0，bottom：20，left：0}，width = svg.attr（width） - margin.left - margin.right，height = svg.attr（height） - margin.top - margin.bottom，g = svg.append（g）。attr（transform，translate（+ margin.left +，+ margin.top +））; var x = d3.scalePoint（）.domain（[0，1，2]）.range（[0，width]）.padding（1）; var y = d3.scaleLinear （[-1e6,2e6]）.range（[height，0]）; g.append（g）.attr（transform，translate（+ x（0）+，0））。 attr（class，axis）.call（d3.axisLeft（y）.ticks（20，s））; g.append（g）.attr（transform，translate x（1）+，0）.attr（class，axis）.call（d3.axisLeft（y）.ticks（20）.tickFormat（d3.format（。0s））） ; g.append（g）.attr（transform，translate（+ x（2）+，0））.attr（class，axis）.call（d3.axisLeft y）.ticks（20）.tickFormat（d3.formatPrefix（。1，1e6）））; d3.selectAll（嘀）。每个（函数（D，I）{VAR打勾= d3.select（本），文本= tick.select（文），BBOX = text.node（）。getBBox（ ）; tick.insert（'rect'，'：first-child'）.attr（'x'，bBox.x - 3）.attr（'y'，bBox.y - 3）.attr bBox.height + 6）.attr（'宽'，bBox.width + 6）.style（'补'，d3.schemeCategory20 [我％20]）;}）;< / SCRIPT>
How can a D3 axis tick have a background color?
A brute way of doing so it to append a rect element inside each g.tick and have a fill on it, but it's quite difficult to achieve, since the rect has to be the same size as the text inside the tick..
Here's a basic ticks example by Mike Bostock (and another with graph)
I took a screenshot and marked (red border) where I want the ticks to have background color:
Does anyone know of any sane way of having background color on Ticks? Thanks
I wouldn't dismiss your rect idea so quickly. It's pretty simple to implement and allows you to adjust the size of the "background" however you want. Here's how it would look with your 3 extra pixel:
d3.selectAll(".tick").each(function(d,i){
var tick = d3.select(this),
text = tick.select('text'),
bBox = text.node().getBBox();
tick.insert('rect', ':first-child')
.attr('x', bBox.x - 3)
.attr('y', bBox.y - 3)
.attr('height', bBox.height + 6)
.attr('width', bBox.width + 6)
.style('fill', d3.schemeCategory20[i % 20]);
});
Full example:
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 0, bottom: 20, left: 0},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scalePoint()
.domain([0, 1, 2])
.range([0, width])
.padding(1);
var y = d3.scaleLinear()
.domain([-1e6, 2e6])
.range([height, 0]);
g.append("g")
.attr("transform", "translate(" + x(0) + ",0)")
.attr("class", "axis")
.call(d3.axisLeft(y)
.ticks(20, "s"));
g.append("g")
.attr("transform", "translate(" + x(1) + ",0)")
.attr("class", "axis")
.call(d3.axisLeft(y)
.ticks(20)
.tickFormat(d3.format(".0s")));
g.append("g")
.attr("transform", "translate(" + x(2) + ",0)")
.attr("class", "axis")
.call(d3.axisLeft(y)
.ticks(20)
.tickFormat(d3.formatPrefix(".1", 1e6)));
d3.selectAll(".tick").each(function(d,i){
var tick = d3.select(this),
text = tick.select('text'),
bBox = text.node().getBBox();
tick.insert('rect', ':first-child')
.attr('x', bBox.x - 3)
.attr('y', bBox.y - 3)
.attr('height', bBox.height + 6)
.attr('width', bBox.width + 6)
.style('fill', d3.schemeCategory20[i % 20]);
});
</script>
这篇关于D3刻度与背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
