2

Имеется круг. К его окружности необходимо добавить градусную меру - маленькие штрихи по 1 градусу и среднего размера штрихи по 10 градусов.

В svg и d3 не сильно силен, так что, если не сложно - дополните мой пример.

Получилось сделать что-то подобное, визуально вроде бы и кажется, что видна разметка, но решение все равно не верное.

<path d="M 429.9,375 
        C 471.3,303.3 446.7,211.5 375,170.1 
        C 303.3,128.7 211.5,153.3 170.1,225 
        C 128.7,296.7 153.3,388.5 225,429.9 
        C 296.7,471.3 388.5,446.7 429.9,375 z " 
        stroke-dasharray="1,3"              
        stroke-width="8"
      />

3 ответа 3

4

Вот версия на d3:

d3.select("svg")
   .selectAll("path.tick")
   .data(d3.range(360))
   .enter()
   .append("path")
   .classed("tick", true)
   .attr("stroke", "black")
   .attr("d", d => {
      let s = d % 10 ? 10 : 20;
      d = d / 180 * Math.PI;
      let x = Math.cos(d);
      let y = Math.sin(d);
      let r = 200;
      return `M ${x*r}     , ${y*r} 
              L ${x*(r-s)} , ${y*(r-s)}`;
   })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg viewbox="-250 -250 500 500"></svg>

p.s.: а что с вашим примером делать надо я не понял

2
  • Грубо говоря - интегрировать ваш код в уже мой имеющийся. Но вы мне и так очень помогли. Спасибо большое 26 фев 2019 в 8:57
  • @VladislavStarikov попозже сделаю, если у Вас не получится 26 фев 2019 в 9:00
4

Штрихи и сектора реализуются с помощью команды stroke=dasharray

Более подробно здесь

Расчет для 12 секторов

при радиусе R=200 Длина окружности равна - 2 * PI * R = 1256.16

Длина одного сектора - 1256 / 12 = 104.72

Формула stroke-dasharray="102 2.72" длина черты - 102, длина пробела - 2.72 в сумме длина одного сектора - 104.72

<meta charset="utf-8">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="600" height="600" viewBox="0 0 600 600" style="border:1px solid gray;" >   
	
	  <!-- Внешний круг -->
	<circle cx="300" cy="300" r="261" fill="none" stroke="gray" stroke-width="2"  /> 
	 <!--  круг c 12 секторами-->
	<circle cx="300" cy="300" r="200" fill="none" stroke="#d3d3d3" stroke-width="100" stroke-dasharray="102 2.72" />
	 <!--  круг c 150 секторами Это штрихи-->
	<circle cx="300" cy="300" r="255" fill="none" stroke="gray" stroke-width="12" stroke-dasharray="3.14 3.14" /> 
	 <!--  Внутренний круг -->
	<circle cx="300" cy="300" r="150" fill="none" stroke="gray" stroke-width="2"  />
</svg>

8
  • @Vladislav Starikov посмотрите этот ответ. Это решение вам будет легче всего встроить в ваше приложение. На мой взгляд лучше понять как это работает вручную, а уж потом, разобравшись, подключать мощные библиотеки. 26 фев 2019 в 9:17
  • 2
    Я уже интегрировал решение @stranger-in-the-q но ваше я тоже попробую, чтобы уже полностью разобраться в вопросе 26 фев 2019 в 9:44
  • 1
    @Alexandr_TT только ничего мощного тут нет, автор попросил на d3 и я исполнил на нем, на обычном js листинг бы не сильно вырос 26 фев 2019 в 10:42
  • 2
    @Alexandr_TT d3 очень мощная, но конкретно в этом примере нет ничего из её мощи, только d3-selection, это очень маленькая её часть, исключительно для DOM манипуляций 26 фев 2019 в 12:18
  • 1
    для сравнения добавил js версию, она даже короче =) но это только потому, что очень простой пример, обычно d3 сильно в выигрыше по длине листинга 26 фев 2019 в 12:35
3

Версия на чистом js, формируем один svg path

let d = ''
for (let i=0; i<360; i++) {
    let r = 200;
    let s = r - (i % 10 ? 10 : 50);
    let a = i / 180 * Math.PI;
    let x = Math.cos(a);
    let y = Math.sin(a);
    d += `
      M ${x*r} , ${y*r} 
      L ${x*s} , ${y*s}
    `;
}

document.querySelector("svg path")
        .setAttribute('d', d);
<svg viewbox="-250 -250 500 500">
  <circle r='200' stroke='black' fill='none'/>
  <circle r='190' stroke='black' fill='none'/>
  <circle r='150' stroke='black' fill='none'/>
  <path stroke='black' />
</svg>

10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.