Дизайн SVG с использованием D3js

Question

Мне нужно создать SVG, используя D3Js,

Я пытался создать SVG-изображение, используя D3JS

Выше написано с использованием 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. Но текстовый тег чуть выше значка.

Это моя первая работа над SVG с использованием D3JS. Какой лучший способ спроектировать этот SVG с использованием D3

Моя идея

<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

Answer 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>

Если понадобится разъяснение, просто дайте мне знать :) знак «симбол» также может быть вставлен таким образом

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 (знак), но этот код svg, который я нашел в интернете, очень велик, вы можете уменьшить его или лучше отредактировать с помощью программы по вашему желанию, и в этом нет необходимости. чтобы выполнить масштабное преобразование :) Вы можете создать группы «g», привязать их к данным, как со всеми элементами перед переводом «y», так как тот, кто переводит каждый из них по оси y в равной степени, является индексом.

С уважением.