Выровнять по центру два текстовых элемента без наложения в прямоугольнике

Question

Итак, у нас есть два текстовых элемента в прямоугольнике.Первый текстовый элемент - это значок шрифта, похожий на кружок, второй - текст.Теперь мы хотим выровнять это в центре прямоугольника так, чтобы сначала шел круг, а затем текст (как точка с маркером).Однако, как нам это сделать в этом случае

            percentageEntering
                .append('svg:rect')
                .style('fill', '#F3F3F4')
                .attr('width', width)
                .attr('height', height);

            percentageEntering
                .append('svg:text')
                .attr('x', width / 2)
                .attr('y', height / 2)
                .attr('dy', '0.35em')
                .attr('text-anchor', 'middle')
                .attr('font-family', 'Material Icons')
                .style('font-size', '20px')
                .style('fill', d => this.subBreadcrumbPercentageColors[d.depth])
                .text('some_icon');

            percentageEntering
                .append('svg:text')
                .attr('x', width / 2)
                .attr('y', height / 2)
                .attr('dy', '0.35em')
                .attr('text-anchor', 'middle')
                .style('font-size', d => {
                    const size = ((legendData.length - 2) > 0)
                        ? 12 - (legendData.length - 2)
                        : 12;
                    return `${size}px`;
                })
                .text(d => {
                    return d.quantity + ' - ' + d.name + ((nodeArray.length === 3) ? ' %' : '');
                });

РЕДАКТИРОВАТЬ После изменений, предложенных @Gerardo, следующий вывод.Итак, сначала я должен был добавить

.style('font-family', "'open sans'")

Чтобы текст не использовал шрифты значков, также в дополнение к этому (например: - some_icon представляет значок).Итак, как я могу убедиться, что эти стили не распространяются на ребенка?И заметил, что текст расположен не по центру, для которого при добавлении параметра y значок и текст перекрываются.

Answer 1

Самое простое исправление для вашего случая - добавление второго элемента <text> как <tspan>. Как это:

percentageEntering
    .append('text')
    .attr('x', width / 2)
    .attr('y', height / 2)
    .attr('dy', '0.35em')
    .attr('text-anchor', 'middle')
    .attr('font-family', 'Material Icons')
    .style('font-size', '20px')
    .style('fill', d => this.subBreadcrumbPercentageColors[d.depth])
    .text('some_icon')
    .append('tspan')
    .style('font-size', d => {
        const size = ((legendData.length - 2) > 0) ? 12 - (legendData.length - 2) : 12;
        return `${size}px`;
    })
    .text(d => {
        return d.quantity + ' - ' + d.name + ((nodeArray.length === 3) ? ' %' : '');
    });

Поскольку вы применили text-anchor к родительскому тексту, все (то есть элемент <text> и его дочерний элемент <tspan>) должны быть расположены в центре.

Вот демоверсия:

const x = 50,
  y = 20,
  width = 150,
  height = 50;
const svg = d3.select("svg")
const rect = svg.append("rect")
  .attr("x", x)
  .attr("y", y)
  .attr("width", width)
  .attr("height", height)
  .style("fill", "wheat")
  .style("border", "gray");

const text = svg.append("text")
  .attr('x', x + width / 2)
  .attr('y', y + height / 2)
  .attr('dy', '0.35em')
  .attr('text-anchor', 'middle')
  .attr('font-family', 'Material Icons')
  .style('font-size', '20px')
  .style('fill', "red")
  .text('\u25CF')
  .append('tspan')
  .style('fill', "darkslategray")
  .text(" foo bar baz");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>