时间戳

首页 > 解决方案 > 文本未显示在 SVG 矩形上

javascript - 文本未显示在 SVG 矩形上

问题描述

我查看了我能找到的所有解决方案，但没有任何内容显示文本。检查元素时，文本在正确的位置（矩形中间）和正确的文本（.name of datum），但不显示。我怎样才能让它显示出来？

小提琴：https ://jsfiddle.net/wojnry60/3/

const ID = "test";
const SCALE = 20;
const PAD = 50;
const MAX_X = 10;
const MAX_Y = 10;
const WIDTH = (MAX_X*SCALE) + (PAD*4);
const HEIGHT = (MAX_Y*SCALE) + (PAD*4);
var data = [
    {name:'ABC', x: 0, y: 0, w: 4, l: 8},
    {name:'DEFG', x: 4, y: 0, w: 6, l: 8},
    {name:'HIJKLMNOP', x: 0, y: 8, w: 10, l: 2}
];

var x_scale = d3.scaleLinear()
    .domain([0, MAX_X])
    .range([0, MAX_X * SCALE]);

var y_scale = d3.scaleLinear()
    .domain([0, MAX_Y])
    .range([0, MAX_Y * SCALE]);

var top_axis = d3.axisTop()
    .scale(x_scale)
    .ticks(MAX_X);

var left_axis = d3.axisLeft()
    .scale(y_scale)
    .ticks(MAX_Y);

var canvas = d3.select('#' + ID)
        .append('svg')
        .attr('width', WIDTH)
        .attr('height', HEIGHT)
        .append('g') // <- in short, this stops transforming above elements.
        .attr('transform', 'translate(' + PAD.toString() + ',' + PAD.toString() + ')')
        .append('g')
        .attr('transform', 'translate(' + PAD.toString() + ',0)')
        .call(top_axis)
        .append('g')
        .attr('transform', 'translate(' + (-1*PAD.toString()) + ',' + PAD.toString() + ')')
        .call(left_axis)
        .append('g')
        .attr('transform', 'translate(' + PAD.toString() + ',0)');

    var rects = canvas.selectAll('rect') // returns an empty selection
        .data(data)
        .enter() // fills a placeholder for each unassigned data element
            .append('g');
    
    rects.append('rect') // fills a rect for each placeholder
        .attr("style", "outline: medium solid #07689f;")
        .attr('width', (subdata, index) => subdata.w * SCALE)
        .attr('height', (subdata, index) => subdata.l * SCALE)
        .attr("x", (subdata, index) => subdata.x * SCALE)
        .attr("y", (subdata, index) => subdata.y * SCALE)
        .attr('fill', 'red');
    
    rects.append('text')
        .attr("x", (subdata, index) => (subdata.x * SCALE) + (subdata.w * SCALE / 2))
        .attr("y", (subdata, index) => (subdata.y * SCALE) + (subdata.l * SCALE / 2))
        .attr("dominant-baseline", "middle")
        .attr("text-anchor", "middle")
        .style("font-size", "14px")
        .text((subdata, index) => subdata.name);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://d3js.org/d3.v6.min.js"></script>
    </head>
    <body>
        <div id='title' class="big">Test</div>
        <br>
        <div id="test"></div>
        <!--<script src="index.js"></script>-->
    </body>
</html>

标签： javascriptsvgd3.js

解决方案

该text节点在那里，它只是从其fill: none曾祖父g节点继承而来。一行修复了它：

const ID = "test";
const SCALE = 20;
const PAD = 50;
const MAX_X = 10;
const MAX_Y = 10;
const WIDTH = (MAX_X*SCALE) + (PAD*4);
const HEIGHT = (MAX_Y*SCALE) + (PAD*4);
var data = [
    {name:'ABC', x: 0, y: 0, w: 4, l: 8},
    {name:'DEFG', x: 4, y: 0, w: 6, l: 8},
    {name:'HIJKLMNOP', x: 0, y: 8, w: 10, l: 2}
];

var x_scale = d3.scaleLinear()
    .domain([0, MAX_X])
    .range([0, MAX_X * SCALE]);

var y_scale = d3.scaleLinear()
    .domain([0, MAX_Y])
    .range([0, MAX_Y * SCALE]);

var top_axis = d3.axisTop()
    .scale(x_scale)
    .ticks(MAX_X);

var left_axis = d3.axisLeft()
    .scale(y_scale)
    .ticks(MAX_Y);

var canvas = d3.select('#' + ID)
        .append('svg')
        .attr('width', WIDTH)
        .attr('height', HEIGHT)
        .append('g') // <- in short, this stops transforming above elements.
        .attr('transform', 'translate(' + PAD.toString() + ',' + PAD.toString() + ')')
        .append('g')
        .attr('transform', 'translate(' + PAD.toString() + ',0)')
        .call(top_axis)
        .append('g')
        .attr('transform', 'translate(' + (-1*PAD.toString()) + ',' + PAD.toString() + ')')
        .call(left_axis)
        .append('g')
        .attr('transform', 'translate(' + PAD.toString() + ',0)');

    var rects = canvas.selectAll('rect') // returns an empty selection
        .data(data)
        .enter() // fills a placeholder for each unassigned data element
            .append('g');
    
    rects.append('rect') // fills a rect for each placeholder
        .attr("style", "outline: medium solid #07689f;")
        .attr('width', (subdata, index) => subdata.w * SCALE)
        .attr('height', (subdata, index) => subdata.l * SCALE)
        .attr("x", (subdata, index) => subdata.x * SCALE)
        .attr("y", (subdata, index) => subdata.y * SCALE)
        .attr('fill', 'red');
    
    rects.append('text')
        .attr("x", (subdata, index) => (subdata.x * SCALE) + (subdata.w * SCALE / 2))
        .attr("y", (subdata, index) => (subdata.y * SCALE) + (subdata.l * SCALE / 2))
        .attr("dominant-baseline", "middle")
        .attr("text-anchor", "middle")
        .attr("fill", "black")
        .style("font-size", "14px")
        .text((subdata, index) => subdata.name);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://d3js.org/d3.v6.min.js"></script>
    </head>
    <body>
        <div id='title' class="big">Test</div>
        <br>
        <div id="test"></div>
        <!--<script src="index.js"></script>-->
    </body>
</html>

推荐阅读