使用 D3js 设计 SVG答案

【问题标题】：Design a SVG using D3js使用 D3js 设计 SVG
【发布时间】：2018-10-25 18:34:24
【问题描述】：

我需要使用 D3Js 创建一个 SVG，

我尝试使用 D3JS 创建 SVG 图像

以上是使用 D3JS 生成的。

<svg width="236.6" height="158" viewBox="0, 0, 236.6, 158"><image href="/img/icon_threat_level_high.png" width="23.1" height="23.1" x="49.5" y="30.5" style="fill: rgb(255, 51, 51);"></image><image href="/img/icon_threat_level_high.png" width="23.1" height="23.1" x="49.5" y="65.5" style="fill: rgb(255, 51, 51);"></image><image href="/img/icon_threat_level_high.png" width="23.1" height="23.1" x="49.5" y="100.5" style="fill: rgb(255, 51, 51);"></image><g><text x="85.19999999999999" y="30.5" style="font-family: Arial; font-size: 28px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1; letter-spacing: normal; fill: rgb(0, 103, 171); dominant-baseline: central;">10</text></g><g><text x="85.19999999999999" y="65.5" style="font-family: Arial; font-size: 28px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1; letter-spacing: normal; fill: rgb(0, 103, 171); dominant-baseline: central;">08</text></g><g><text x="85.19999999999999" y="100.5" style="font-family: Arial; font-size: 28px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1; letter-spacing: normal; fill: rgb(0, 103, 171); dominant-baseline: central;">03</text></g></svg>

查询：

第一个图像标签的y为“30.5”，同样设置为第一个文本标签的y。但是文本标签在图标上方一点点。

这是我第一次使用 D3JS 处理 SVG。使用 D3 设计 SVG 的最佳方法是什么

我的想法是

<svg><g><image></image><text>10</text><text>GB</text><text>Name</text></g></svg>

或者

<svg><g><image></image><text><tspan>10</tspan><tspan>GB</tspan><tspan>Name</tspan></text></g></svg>

由于“35”、“GB”和“BitTorrent”有不同的字体大小、颜色，我更喜欢在文本中选择 tspan 并设置这些 tspan 的样式

请建议设计 SVG

【问题讨论】：

文本元素上的y 属性定位“基线”或文本底部（不包括悬挂在该线下方的下降）。因此，如果您使用与圆心 + 半径相匹配的 y 值，那么圆的底部将与文本的底部对齐。
是的，使用<tspan> 元素是个好主意，这样它们就可以有不同的样式。每个都可以有自己的dy 属性，以相对于文本框的其余部分向上或向下移动它。
感谢史蒂夫，将半径 11.55 添加到文本的 y 后它可以工作

标签： javascript d3.js svg

【解决方案1】：

你为什么不使用 d3 添加它，像这样？

var  width = 236.6,
 height=158,
 margin = {top:20,left:30,right:20,bottom:20}

		var sign = '<path d="M244.709,389.496c18.736,0,34.332-14.355,35.91-33.026l24.359-290.927c1.418-16.873-4.303-33.553-15.756-46.011   C277.783,7.09,261.629,0,244.709,0s-33.074,7.09-44.514,19.532C188.74,31.99,183.022,48.67,184.44,65.543l24.359,290.927   C210.377,375.141,225.973,389.496,244.709,389.496z" data-original="#000000" class="active-path" data-old_color="#E9EAEF" fill="#EAEBF0"/><path d="M244.709,410.908c-21.684,0-39.256,17.571-39.256,39.256c0,21.683,17.572,39.254,39.256,39.254   s39.256-17.571,39.256-39.254C283.965,428.479,266.393,410.908,244.709,410.908z" data-original="#000000" class="active-path" data-old_color="#E9EAEF" fill="#EAEBF0"/>'


data = ["10","08","03"];

var svg =d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right*6)
.attr("height", height + margin.top + margin.bottom)
.style("background","lightgreen")
.append("g")
.attr("transform","translate(" +  margin.left + "," + margin.top*2 + ")");

var bigCircle = svg.append("g")
        .append("circle")
        .attr("r",margin.left/1.2)
        .attr("fill","red")
        .attr("cx", margin.right)
        .attr("cy", -7)

var bigText = svg.append("g")
        .append("text")
        .attr("fill","steelblue")
        .attr("font-size",50)
        .attr("x", margin.right*3.7)
        .attr("y", 10)
        .text("35")

var bigTextNext = svg.append("g")
        .append("text")
        .attr("fill","grey")
        .attr("font-size",25)
        .attr("x", margin.right*6.6)
        .attr("y", 8.5)
        .text("GB")

var bigTextNextNext = svg.append("g")
            .append("text")
            .attr("fill","steelblue")
            .attr("font-size",25)
            .attr("x", margin.right*9)
            .attr("y", 8.5)
            .text("BitTorrent");

var circles = svg.append("g")
      .attr("transform","translate(" +  0 + "," + margin.top*3 + ")")
      .selectAll("cirle")
      .data(data)
      .enter()
      .append("circle")
      .attr("r", 12)
      .attr("cx", margin.right)
      .attr("cy", (d,i)=> i * margin.top*2)
      .attr("fill","red");	

svg.append("g")
.attr("transform","translate(" +  0 + "," + margin.top*3 + ")")
.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("font-size",22)
  .style("fill","steelblue")
  .attr("y", (d,i)=> (i+1) * (margin.top/2.8))
  .attr("x", margin.right*1.7)
  .attr("dx",12)
  .attr("dy",(d,i)=> 	(margin.top*1.67) * i)
  .text((d)=> d)

<!--jquery.min.js-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--d3.min.js 4.13.0-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

如果需要澄清，请告诉我 :) 符号 simbol 我也可以这样插入

var sign = '<path d="M244.709,389.496c18.736,0,34.332-14.355,35.91-33.026l24.359-290.927c1.418-16.873-4.303-33.553-15.756-46.011 C277.783,7.09,261.629,0,244.709,0s-33.074,7.09-44.514,19.532C188.74,31.99,183.022,48.67,184.44,65.543l24.359,290.927 C210.377,375.141,225.973,389.496,244.709,389.496z" data-original="#000000" class="active-path" data-old_color="#E9EAEF" fill="#EAEBF0"/><path d="M244.709,410.908c-21.684,0-39.256,17.571-39.256,39.256c0,21.683,17.572,39.254,39.256,39.254 s39.256-17.571,39.256-39.254C283.965,428.479,266.393,410.908,244.709,410.908z" data-original="#000000" class="active-path" data-old_color="#E9EAEF" fill="#EAEBF0"/>'

然后您创建一个组并向其添加一个 .htmt(sign) 但我在互联网上找到的 svg 代码非常大，您可以将其缩小或使用程序更好地编辑它到您想要的大小，并且不需要进行比例转换 :) 您可以创建“g”组，将其绑定到数据，就像在翻译“y”之前的所有元素一样，使每个元素在 y 轴上平均平移的那个是索引。

最好的问候。

【讨论】：