Как встроить текст и изображение - PullRequest
Новая
       44

Как встроить текст и изображение

0 голосов
/ 21 апреля 2020

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

И я также пытаюсь установить функцию для image (Если я щелкнул по нему, появилась ссылка на веб-сайт)

Это то, что я пытаюсь повторить

Пример в изображении того, что я говорю

Это мой код (я пробовал некоторые методы, но они не работали) 

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 500)
                                     .attr("height", 500);
 
var g = d3.select("svg") .append("g")
 var rectangle = g.append("rect")
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("width", 300)
                  .attr("height", 200)
                  .style("fill","pink");
                         
 var text = g.append("text")
 .attr("x",150)
 .attr("y",100)
 .attr("text-anchor","middle")
 .text('Nam oc cho')
 
 var img = g.append("image")
 .attr("x",200)
 .attr("y",85)
 .attr("href","firefox.jpg")
 .attr("height","20px")
.attr("width","20px")
                       
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

https://jsfiddle.net/namkhoai16/o7cm9n35/38/

1 Ответ

1 голос
/ 22 апреля 2020

Поскольку текст написан с помощью привязки текста: середина имеет половину длины до 150 и половину после. Так что нам просто нужно добавить половину его длины к его позиции x, чтобы найти его конец. 

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 500)
                                     .attr("height", 500);
 
var g = d3.select("svg") .append("g")
 var rectangle = g.append("rect")
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("width", 300)
                  .attr("height", 200)
                  .style("fill","pink");
                         
 var text = g.append("text")
 .attr("x",150)
 .attr("y",100)
 .attr("text-anchor","middle")
 .text('Nam oc cho')
 
 var img = g.append("image")
 .attr("x",150 + text.node().getComputedTextLength () / 2)
 .attr("y",85)
 .attr("href","https://cnet2.cbsistatic.com/img/0ssO7VfSYSEzbQVQ6uK6FYamQx4=/940x0/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg")
 .attr("height","20px")
.attr("width","20px")
                       
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
...