将文字放在矩形的中心

编程入门行业动态更新时间:2024-10-25 14:30:16

本文介绍了将文字放在矩形的中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

在下面的代码中，文本未放置在矩形的中心，我正在使用

In the following code the text is not placed at the center of the rectangle, I am using

.attr("dx", x.bandwidth()/2) .attr("dy", y.bandwidth()/2)

除了反复试验外，还有没有办法将文本中心放置在矩形中?

Rather than trial and error, is there a way to place the text center in the rectangle?

当前看起来像这样(朝底部和向右):

Currently it looks like this (towards bottom and towards right):

以下是我的代码:

<!DOCTYPE html> <script src="cdnjs.cloudflare/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>  <style> rect { stroke: #9A8B7A; stroke-width: 1px; fill: #CF7D1C; opacity: } </style> <body> <svg width="500" height="500"></svg> </body> <script> var dataset = [[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]]; var local = d3.local(); var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0, width]); var y = d3.scaleBand().rangeRound([0, height]); y.domain(dataset.map(function(d,i) { return i; })); var maxChildLength= d3.max(dataset, function(d) { return d.length; }); var xArr=Array.apply(null, {length: maxChildLength}).map(Function.call, Number); x.domain(xArr); var maxNum = d3.max(dataset, function(array) { return d3.max(array); }); var color=d3.scaleLinear().domain([0,maxNum]).range([0,1]); svg.append("g") .selectAll("g") .data(dataset)//use top-level data to join g .enter() .append("g") .selectAll("rect") .data(function(d, i) {//for each <g>, use the second-level data (return d) to join rect local.set(this, i);//this is the <g> parent return d; }) .enter() .append("rect") .attr("x", function(d, i, j) { // return (i * 20) + 40; return x(i); }) .attr("y", function(d) { // return (local.get(this) * 20) + 40; return y(local.get(this)); }) //.attr("width",20) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill-opacity",function(d){console.log(color(+d));return color(+d);}) svg.append("g") .selectAll("g") .data(dataset) .enter() .append("g") .selectAll("text") .data(function(d, i) { local.set(this, i) return d; }) .enter() .append("text") .text(function(d, i, j) { return d; }) .attr("x", function(d, i, j) { // return (i * 20) + 40; return x(i); }) .attr("y", function(d) { return y(local.get(this)); //return (local.get(this) * 20) + 40; }) .attr("dx", x.bandwidth()/2) .attr("dy", y.bandwidth()/2) .attr("dominant-baseline", "text-before-edge") .attr("font-family", "sans-serif") .attr("font-size", "20px") </script>

推荐答案

使用text-align: middle和dominant-baseline: central:

.attr("text-anchor", "middle") .attr("dominant-baseline", "central")

这是您所做的更改的代码:

Here is your code with those changes:

<!DOCTYPE html> <script src="cdnjs.cloudflare/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>  <style> rect { stroke: #9A8B7A; stroke-width: 1px; fill: #CF7D1C; opacity: } </style> <body> <svg width="500" height="500"></svg> </body> <script> var dataset = [ [1, 3, 3, 5, 6, 7], [3, 5, 8, 3, 2, 6], [9, 0, 6, 3, 6, 3], [3, 4, 4, 5, 6, 8], [3, 4, 5, 2, 1, 8] ]; var local = d3.local(); var svg = d3.select("svg"), margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0, width]); var y = d3.scaleBand().rangeRound([0, height]); y.domain(dataset.map(function(d, i) { return i; })); var maxChildLength = d3.max(dataset, function(d) { return d.length; }); var xArr = Array.apply(null, { length: maxChildLength }).map(Function.call, Number); x.domain(xArr); var maxNum = d3.max(dataset, function(array) { return d3.max(array); }); var color = d3.scaleLinear().domain([0, maxNum]).range([0, 1]); svg.append("g") .selectAll("g") .data(dataset) //use top-level data to join g .enter() .append("g") .selectAll("rect") .data(function(d, i) { //for each <g>, use the second-level data (return d) to join rect local.set(this, i); //this is the <g> parent return d; }) .enter() .append("rect") .attr("x", function(d, i, j) { // return (i * 20) + 40; return x(i); }) .attr("y", function(d) { // return (local.get(this) * 20) + 40; return y(local.get(this)); }) //.attr("width",20) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill-opacity", function(d) { return color(+d); }) svg.append("g") .selectAll("g") .data(dataset) .enter() .append("g") .selectAll("text") .data(function(d, i) { local.set(this, i) return d; }) .enter() .append("text") .text(function(d, i, j) { return d; }) .attr("x", function(d, i, j) { // return (i * 20) + 40; return x(i); }) .attr("y", function(d) { return y(local.get(this)); //return (local.get(this) * 20) + 40; }) .attr("dx", x.bandwidth() / 2) .attr("dy", y.bandwidth() / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-family", "sans-serif") .attr("font-size", "20px") </script>

更多推荐

将文字放在矩形的中心

本文发布于:2023-11-09 15:57:36，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1572797.html