gpt4 book ai didi

d3.js - D3勾号与背景

转载 作者:行者123 更新时间:2023-12-02 06:14:26 25 4
gpt4 key购买 nike

D3轴tick如何具有背景色?

这样做的一种蛮力方法是在每个rect内附加一个g.tick元素,并在其上附加一个fill,但是这很难实现,因为rect的大小必须与tick内的文本大小相同。

这是Mike Bostock的basic ticks example(以及带有图形的another)

我拍了屏幕截图并标记了(红色边框),我希望刻度线具有背景色:

enter image description here

有人知道在Ticks上使用背景颜色的任何明智的方法吗?
谢谢

最佳答案

我不会这么快就放弃您的rect想法。它非常容易实现,并且可以根据需要调整“背景”的大小。这是您的3个额外像素的外观:

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]);
});

完整示例:

<!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.js - D3勾号与背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42327183/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com