Выровнять текстовый элемент по середине в древовидной карте

Question

Как установить выравнивание текста элемента text по центру элемента SVG g (родительское поле)?

как text-align: center в элементе html div.

Я пытаюсь построить древовидную карту с помощью D3.js

JSFiddle Demo

Вот код, который я пробую:

leaf.append("text")
            .attr("fill", "#fff")
            //.style("text-anchor", "end")
            .attr("width", d => d.x1 - d.x0)
            .attr("height", d => d.y1 - d.y0)
            // .attr("y", 0)
            // .attr("x", 0)
            // .attr("dy", 0)
            .attr("font-size", d => Math.min(d.x1 - d.x0, d.y1 - d.y0) / 6)
            .selectAll("tspan")
            .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.data.volume)).concat(format(d.data.pc)))
            .enter().append("tspan")
            // .style("width", d => d.x1 - d.x0)
            // .style("height", d => d.y1 - d.y0)
             //.style("text-anchor", "middle")
            .attr("dy", "1.1em")
            .attr("x", "5")
            .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "200" : "700")
            .attr("font-size", (d) => d.value)
            .text(d => d);

Пожалуйста, посмотрите пример кода на JSFiddle

Answer 1

Элементы SVG не имеют ни одного из тех свойств HTML, которые вы используете в своем коде.

Простым решением здесь является установка свойства x в середине прямоугольника с использованием свойств x0 и x1, созданных генератором древовидной карты, в сочетании с text-anchor: middle. Однако из-за странных данных, связанных с элементами <tspan>, мы должны наклониться назад, чтобы получить данные от родителей:

.attr("x", function() {
    const parentData = d3.select(this.parentNode).datum();
    return (parentData.x1 - parentData.x0) / 2;
});

Вот ваш код только с этим изменением:

let data = {
  "name": "topLevel element",
  "children": [{
      "name": "group 1",
      "children": [{
          "name": "first child",
          "volume": 567.2,
          "value": 1250,
          "price": 1201,
          "pc": 1
        },
        {
          "name": "secondary",
          "volume": 7809.1,
          "value": 12450,
          "price": 13201,
          "pc": 2
        },
        {
          "name": "another",
          "volume": 2163.7,
          "value": 12450,
          "price": 13201,
          "pc": 3
        },
        {
          "name": "like svg",
          "volume": 1756.5,
          "value": 12450,
          "price": 13201,
          "pc": 4
        },
        {
          "name": "abc",
          "volume": 1201.7,
          "value": 12450,
          "price": 13201,
          "pc": 5
        }
      ]
    },
    {
      "name": "Group 2",
      "children": [{
          "name": "tripppp",
          "volume": 2999.3,
          "value": 12450,
          "price": 13201,
          "pc": 6
        },
        {
          "name": "pardon",
          "volume": 10398.3,
          "value": 12450,
          "price": 13201,
          "pc": 7
        },
        {
          "name": "world d3",
          "volume": 10150.5,
          "value": 12450,
          "price": 13201,
          "pc": 8
        },
        {
          "name": "other bit",
          "volume": 2652.6,
          "value": 12450,
          "price": 13201,
          "pc": 7
        },
        {
          "name": "rest train",
          "volume": 2894,
          "value": 12450,
          "price": 13201,
          "pc": 4
        },
        {
          "name": "big data",
          "volume": 6281.2,
          "value": 12450,
          "price": 13201,
          "pc": 3
        },
        {
          "name": "relase note",
          "volume": 2431.3,
          "value": 12450,
          "price": 13201,
          "pc": 3
        },
        {
          "name": "seventeen",
          "volume": 2373.5,
          "value": 12450,
          "price": 13201,
          "pc": 2
        },
        {
          "name": "fourth",
          "volume": 1377.1,
          "value": 12450,
          "price": 13201,
          "pc": 1
        }
      ]
    }
  ]
};

let chartDiv = document.getElementById("chart");
let svg = d3.select(chartDiv).append("svg");

var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;

let chart = () => {
  const root = treemap(filteredData);

  const svg = d3.select("svg");

  svg
    .attr("width", width)
    .attr("height", height)
    .classed("svg-content-responsive", true)
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", `0 0 ${width} ${height}`);

  const leaf = svg.selectAll("g")
    .data(root.leaves())
    .enter().append("g")
    .attr("transform", d => `translate(${d.x0},${d.y0})`);

  leaf.append("title")
    .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);

  leaf.append("rect")
    .attr("fill", "green")
    .attr("fill-opacity", 1.0)
    // .attr("text-anchor", "start")
    // .attr("dominant-baseline", "central")
    .attr("width", d => d.x1 - d.x0)
    .attr("height", d => d.y1 - d.y0)
    .attr("class", function(d) {
      return "node level-" + d.depth;
    });
  // .on("mouseover", (d) => {		
  //   d3.select(this)
  //     .style("stroke", "yellow")
  //     .style("opacity", 1)
  //  });

  // leaf.append("clipPath")
  //     .attr("id", d => (d.clipUid = ("#clip")).id)
  //     .append("use")
  //     .attr("xlink:href", d => d.leafUid.href);

  leaf.append("text")
    .attr("fill", "#fff")
    //.style("text-anchor", "end")
    // .attr("clip-path", d => d.clipUid)
    .attr("text-anchor", "middle")
    .attr("width", d => d.x1 - d.x0)
    .attr("height", d => d.y1 - d.y0)
    // .attr("y", 0)
    // .attr("x", 0)
    // .attr("dy", 0)
    .attr("font-size", d => Math.min(d.x1 - d.x0, d.y1 - d.y0) / 6)
    .selectAll("tspan")
    .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.data.volume)).concat(format(d.data.pc)))
    .enter().append("tspan")
    // .style("width", d => d.x1 - d.x0)
    // .style("height", d => d.y1 - d.y0)
    // .attr("lengthAdjust" ,"spacingAndGlyphs")
    // .attr("transform", "(250 250 250 250)")
    //.style("text-anchor", "middle")
    // .attr("dominant-baseline", "central")
    .attr("dy", "1.1em")
    .attr("x", function() {
      const parentData = d3.select(this.parentNode).datum();
      return (parentData.x1 - parentData.x0) / 2;
    })
    // .attr("dx", 0)
    // .attr("y", 18)
    // .attr("y", (d, i, nodes) => `${(i === nodes.length ) * 1.3 + 1.2 + i * 1.9}em`)
    .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "200" : "700")
    // .attr("font-family", "Vazir")
    .attr("font-size", (d) => d.value)
    .text(d => d);

  return svg.node();
}
let filteredData = d3.hierarchy(data)
  .sum(d => d.volume)
  .sort((a, b) => b.height - a.height || b.value - a.value);


let treemap = d3.treemap()
  .size([width, height])
  .padding(1)
  .paddingRight(3)
  .round(true);

let format = d3.format(",d");


chart();

* {
  font-family: 'Vazir', sans-serif;
}

/* Make the chart container fill the page using CSS. */

#chart {
  background: #212121;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  font-family: 'Vazir', sans-serif;
}

g text {
  text-shadow: 1px 2px 0 #555;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<link href="https://cdn.rawgit.com/rastikerdar/vazir-font/v19.2.0/dist/font-face.css" rel="stylesheet" type="text/css" />

<div id="chart"></div>

PS: я написал "только с этим изменением" , потому что у вашего кода есть несколько очевидных проблем, таких как присвоение width и margin текстовому элементу, который я оставил нетронутым.