jjzjj

javascript - 在圆圈内环绕文字

coder 2024-05-11 原文

我正在使用 d3 绘制 UML 图，并希望将文本包裹在使用 d3 绘制的形状中。我已经了解了下面的代码，但找不到使文本“适合”我的形状的解决方案(见下图)。

var svg =  d3.select('#svg')
    .append('svg')
        .attr('width', 500)
        .attr('height', 200);

var global = svg.append('g');

global.append('circle')
      .attr('cx', 150)
      .attr('cy', 100)
      .attr('r', 50);

global.append('text')
  .attr('x', 150)
  .attr('y', 100)
  .attr('height', 'auto')
  .attr('text-anchor', 'middle')
  .text('Text meant to fit within circle')
  .attr('fill', 'red');

最佳答案

这是我能做的最好的。

我想在 SVG 中将文本居中并包裹在圆圈或矩形内。 无论文本长度如何，文本都应保持居中(水平/垂直)。

svg {
    width: 600px;
    height: 200px;
    background-color: yellow;
}
.circle {
    background-color: blue;
    height: 100%;
    border-radius: 100%;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
}
.circle span {
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
<svg>
    <foreignObject width="200" height="200" x="100" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a</span>
        </div>
    </foreignObject>

    <foreignObject width="200" height="200" x="300" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a paragraph</span>
        </div>
    </foreignObject>

    <foreignObject width="200" height="200" x="500" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a paragraph that requires word wrap</span>
        </div>
    </foreignObject>
</svg>

transform 属性不是强制性的，我使用的是 translate(-r, -r)，这样 foreignObject 的 (x,y) 就像 SVG 圆的 (cx, cy)，宽度，高度 = 2*r，r 为半径。

我这样做是为了用作 D3 强制布局中的节点。我把这个片段翻译成 javascript D3 的风格作为练习。

关于javascript - 在圆圈内环绕文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20913869/

圆圈环绕3934sectionjavascripttextsvgd3.jsgeometry

有关javascript - 在圆圈内环绕文字的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  2. ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2

    对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案 在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 字符串文字前面的 * 在 ruby​​ 中有什么作用？ - 2

    这段代码似乎创建了一个范围从a到z的数组，但我不明白*的作用。有人可以解释一下吗？[*"a".."z"] 最佳答案 它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw

  5. ruby - 使用 RMagick 从图像中切出圆圈 - 2

    我想使用rmagick从图像中剪出一个圆圈。这是我希望能够完成的示例:-->好像我想用http://studio.imagemagick.org/RMagick/doc/draw.html#circle切一个圆，然后clip_path来掩盖它，但文档不是很清楚。谁能给我指出正确的方向？ 最佳答案 require'rmagick'im=Magick::Image.read('walter.jpg').firstcircle=Magick::Image.new200,200gc=Magick::Draw.newgc.fill'black

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby - 如何在不使用 HERE-DOCUMENT 语法的情况下在 Ruby 中制作多行字符串文字？ - 2

    问题总结我想尝试使用Ruby来完成我在Python中所做的事情。在Python中它有r"""syntaxtosupportrawstrings，这很好，因为它允许将原始字符串与代码内联，并以更自然的方式连接它们，而无需特殊缩进。在Ruby中，当使用原始字符串时，必须使用其次是EOT在单独的行中，这会破坏代码布局。你可能会问，为什么不使用Ruby的%q{}？嗯，因为%q{}与Python的r"""相比有局限性因为它不会转义多个\\\并且只处理单个\.我正在动态生成Latex代码并写入一个文件，该文件稍后用pdflatex编译。Latex代码包含类似\\\的内容在许多地方。如果我使用Rub

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. Ruby:为什么等号在文字正则表达式中会导致解析错误？ - 2

    这些解析和执行良好:"=".scan(/=/)"=".scan(/=/)这会导致“未终止的正则表达式遇到文件结尾”:"=".scan/=/如果我在=之前插入一些内容，错误就会消失:"=".scan/^=/这是怎么回事？ 最佳答案 我猜你正在点击thisintheparser:case'/':if(IS_BEG()){lex_strterm=NEW_STRTERM(str_regexp,'/',0);returntREGEXP_BEG;}if((c=nextc())=='='){set_yylval_id('/');lex_state

随机推荐