D3.js 文本和矩形不对齐_D3.js_Svg

D3.js 文本和矩形不对齐

d3.js svg

D3.js 文本和矩形不对齐,d3.js,svg,D3.js,Svg,以下是文本在内的矩形的代码问题是它似乎无法对齐。如何使它们更容易对齐以下是我使用的代码：我知道我可以调整矩形和文本的x和y，但使它们对齐的更有组织的方法可能是为每个矩形和相关文本设置一个g，并调整它们在g中的位置？如何做到这一点 <!DOCTYPE html> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></scr

以下是文本在内的矩形的代码

问题是它似乎无法对齐。如何使它们更容易对齐

以下是我使用的代码：

我知道我可以调整矩形和文本的

和

，但使它们对齐的更有组织的方法可能是为每个矩形和相关文本设置一个

，并调整它们在

中的位置？如何做到这一点

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
    rect {
        stroke: #9A8B7A;
        stroke-width: 1px;
        fill: #CF7D1C;
        opacity:
    }
</style>
<body></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 svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 500);
    var local = d3.local();


    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;
            })
            .attr("y", function(d) {
                return (local.get(this) * 20) + 40;
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", "20px");




    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
                console.log(this);
                local.set(this, i);//this is the <g> parent
                return d;
            })
            .enter()
            .append("rect")

            .attr("x", function(d, i, j) {
                return (i * 20) + 40;

            })
            .attr("y", function(d) {
                return (local.get(this) * 20) + 40;
            })
            .attr("width",20)
            .attr("height",20)
            .attr("fill-opacity",0.1)




</script>


直肠{
行程：9A8B7A；
笔画宽度：1px；
填充：#CF7D1C；
不透明度：
}
var数据集=[[1,3,3,5,6,7]，[3,5,8,3,2,6]，[9,0,6,3,6,6,3]，[3,4,4,5,6,8]，[3,4,5,2,1,8]；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var local=d3.local（）；
svg.append（“g”）
.全选（“g”）
.数据（数据集）
.输入（）
.附加（“g”）
.selectAll（“文本”）
.数据（功能（d，i）{
local.set（本，i）
返回d；
})
.输入（）
.append（“文本”）
.文本（功能（d、i、j）{
返回d；
})
.attr（“x”，函数（d，i，j）{
返回（i*20）+40；
})
.attr（“y”，函数（d）{
返回（本地。获取（此）*20）+40；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“20px”）；
svg.append（“g”）
.全选（“g”）
.data（dataset）//使用顶级数据连接g
.输入（）
.附加（“g”）
.selectAll（“rect”）
.data（函数（d，i）{//对于每个函数，使用第二级数据（返回d）连接rect
console.log（this）；
local.set（this，i）；//这是父级
返回d；
})
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i，j）{
返回（i*20）+40；
})
.attr（“y”，函数（d）{
返回（本地。获取（此）*20）+40；
})
.attr（“宽度”，20）
.attr（“高度”，20）
.attr（“填充不透明度”，0.1）

一个简单的解决方案就是设置。这是一个很好的图像，可能包含以下值：

资料来源：

因此，在您的情况下，只需执行以下操作：

.attr("dominant-baseline", "text-before-edge")

以下是更改后的代码：

var数据集=[
[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 svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var local=d3.local（）；
svg.append（“g”）
.全选（“g”）
.data（dataset）//使用顶级数据连接g
.输入（）
.附加（“g”）
.selectAll（“rect”）
.数据（功能（d，i）{
local.set（this，i）；//这是父级
返回d；
})
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i，j）{
返回（i*20）+40；
})
.attr（“y”，函数（d）{
返回（本地。获取（此）*20）+40；
})
.attr（“宽度”，20）
.attr（“高度”，20）
.attr（“填充”、“棕褐色”）
.attr（“笔划”、“灰色”）
.attr（“填充不透明度”，0.4）；
svg.append（“g”）
.全选（“g”）
.数据（数据集）
.输入（）
.附加（“g”）
.selectAll（“文本”）
.数据（功能（d，i）{
local.set（本，i）
返回d；
})
.输入（）
.append（“文本”）
.文本（功能（d、i、j）{
返回d；
})
.attr（“x”，函数（d，i，j）{
返回（i*20）+40；
})
.attr（“y”，函数（d）{
返回（本地。获取（此）*20）+40；
})
.attr（“主要基线”，“边缘前文本”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“20px”）
谢谢！我还有一个后续问题：你能帮忙调查一下吗？