D3 带背景的勾号

本文介绍了D3 带背景的勾号的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

D3 轴如何tick 有背景颜色?

一种粗暴的方法是在每个 g.tick 中附加一个 rect 元素并在其上添加一个 fill，但它是很难实现，因为 rect 必须与 tick 中的文本大小相同..

这是 Mike Bostock(和

有谁知道在 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('高度', bBox.height + 6).attr('宽度', bBox.width + 6).style('fill', d3.schemeCategory20[i % 20]);});

完整示例:

<meta charset="utf-8"><svg width="960" height="500"></svg><script src="//d3js.org/d3.v4.min.js"></script><脚本>var svg = d3.select("svg"),边距 = {顶部:20，右侧:0，底部:20，左侧: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, 宽度]).padding(1);var y = d3.scaleLinear().domain([-1e6, 2e6]).range([高度, 0]);g.append("g").attr("transform", "translate(" + x(0) + ",0)").attr(类"，轴").call(d3.axisLeft(y).ticks(20, "s"));g.append("g").attr("transform", "translate(" + x(1) + ",0)").attr(类"，轴").call(d3.axisLeft(y).ticks(20).tickFormat(d3.format(".0s")));g.append("g").attr("transform", "translate(" + x(2) + ",0)").attr(类"，轴").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('高度', bBox.height + 6).attr('宽度', bBox.width + 6).style('fill', d3.schemeCategory20[i % 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 带背景的勾号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！