在SVG中使用HTML格式进行文本对齐

Question

I'm trying to make the numbers in this code line up regardless if they are positive or negative.

 pointer_labels = ["PANTS", "SOCKS", "SHOES"] vals = [0, 0.8, -0.2] var svg = d3.select("#root").append("svg") var texts = svg.selectAll("text").data(pointer_labels); texts.enter() .append("text") .attr("x", 15) .attr("y", function(d, i) { return i * 20 + 9; }) .html(function(d, i) { var sign = '<foreignObject x="20" y="9" width="150" height="200">&nbsp;<span>&plus</span></foreignObject>'; if (vals[i] < 0) { sign = "&nbsp;&minus;"; } return pointer_labels[i] + " " + sign + Math.abs(vals[i]).toFixed(2); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="root"> </div> 

I'm trying to accomplish this by inserting an invisible minus sign, but whenever I insert an HTML tag, the text isn't displayed, despite being inserted into the DOM. I've reviewed the questions similar to this one and have tried the foreignObject trick, but that doesn't seem to be working either.

Note that the reason I'm using SVG despite the fact that I seem only to be working with text, is that this is actually for plot legends that I'm making. This is how it looks in the actual application:

Answer 1

Thanks to Gildor's comment, I figured out that if I just created a separate text element for the numbers and align it to the right, I get the same effect.

 pointer_labels = ["PANTS", "SOCKS", "SHOES"] vals = [0, 0.8, -0.2] var svg = d3.select("#root").append("svg") var texts = svg.selectAll("g").data(pointer_labels); var txt_enter = texts.enter(); txt_enter.append("text") .attr("x", 15) .attr("y", function(d, i){ return i * 20 + 9;}) .text(function(d, i) { return pointer_labels[i]}); txt_enter.append("text") .attr("x", 300) .attr("y", function(d, i){ return i * 20 + 9;}) .attr("text-anchor","end") .html(function(d, i) { var sign = ''; if(vals[i] < 0){ sign = "&minus;"; } return sign + Math.abs(vals[i]).toFixed(2); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="root"> </div> 

Basically, if you can avoid using html inside SVG, you should.