Можно ли иметь слоистые элементы SVG, которые взаимодействуют друг с другом в D3?

StackOverflow https://stackoverflow.com/questions/8854665

  •  28-10-2019
  •  | 
  •  

Вопрос

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

Вот пример поведения, о котором я имею в виду:

Скриншот http://img6.imageshack.us/img6/6674/screengraph.png

Я пытался сделать это с D3 и SVG, но обнаружил, что трудно управлять Z-индексами между элементами SVG и DIV (или элементами SVG и другими элементами SVG, честно точка). Но я помню, что пришел к выводу, что единственным эффективным способом сделать то, что я искал, было то, что каждый столбец будет 3 отдельным элементам SVG, по сути, верхним фоном, баром, а затем нижним фоном, и вручную уволить все 3 предмета Покажите изменение переноса всякий раз, когда один из них завис.

В конце концов я просто отказался от SVG и в итоге использовал все DOV, просто используя D3 для методов масштаба и рисуя все вручную, используя шаблоны nockout.js. Но теперь я смотрю на 200 линий рефакторированного JavaScript, и мне интересно, дал бы мне более чистое решение. Я упустил что -то в D3, что могло бы легко достичь того, что я ищу?

Это было полезно?

Решение

Хорошо для того, чтобы сделать колонны легко зависнуть! Техника, которую я бы использовал для этого, является невидимым наложением с указательными событиями: все, и, необязательно назначать слушателя Mouseover, родительскому элементу SVG: G, а не одному из прямы.

Структура для каждого бара будет выглядеть так:

<g class="bar" transform="translate(0,…)">
  <rect class="green"></rect>
  <rect class="overlay"></rect>
</g>

(У вас, вероятно, есть другие вещи, которые вы, возможно, захотите добавить, например, выделенные «14» на своем скриншоте, который вы реализуете в качестве другого прямого прямо с округлыми углами и текстовым элементом.)

Прямо наложение-это полная высота диаграммы (70px, в вашем примере). У него следующий стиль:

.overlay {
  fill: none;
  pointer-events: all;
}

Зеленый прямой - это просто высота стержня, и смещен вертикально, поэтому дно стержня составляет y = 0. Такая же сделка для красных негативных прямы.

Короче говоря, невидимый прямой с указательными событиями все получает все события указателя для этой панели. Таким образом, вы можете использовать: стили наворота на родительских g -элементах, скажем, настройка цвета бара на Hover:

.bar:hover .green {
  fill: lightgreen;
}

Аналогичным образом, вы можете зарегистрировать события «Mouseover» и «Mouseout» на родительском элементе G, или на наложении.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top