在treemap中将文本元素与中间对齐

Question

How I can set a text-align of text element to the center of SVG g element (parent box)?

like text-align: center on html div element.

I try to build treemap by D3.js

JSFiddle Demo

Here is a code that I try :

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);

Please view the sample code on JSFiddle

Answer 1

SVG elements have none of those HTML properties you're using in your code.

The simple solution here is setting the x property to the middle of the rectangle, by using the x0 and x1 properties created by the treemap generator, combined with text-anchor: middle . However, due to the strange data bound to the <tspan> elements, we have to bend over backwards to get the datum from the parents:

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

Here is your code with that change only:

 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(/(?=[AZ][^AZ])/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: I wrote "with that change only" because your code has several evident issues, such as assigning a width and a margin to a text element, which I left untouched.