SVG круг слишком мал для mouseevent - PullRequest
Новая
       9

SVG круг слишком мал для mouseevent

0 голосов
/ 04 апреля 2020

Я работаю над графиком D3. Мой график содержит круги без цвета заливки, которые выглядят так: 

var circles = svg.selectAll("circle")
.data(x.ticks(6))
.enter().append("circle")
.attr("r", function (d) { return radius(d); })
.style("fill", "none")
.style("stroke", "black")
.style("stroke-dasharray", "3,3")
.style("stroke-width", "1px")

Я добавил событие мыши к этому кругу, чтобы всякий раз, когда кто-то наводил курсор на него, круг получал большую ширину: 

.on('mouseenter', function (a, i) {
  d3.select(this)
  .style("stroke-dasharray", "0")
  .style("stroke-width", "3px")
})

Тем не менее, ширина круга слишком мала, чтобы его можно было легко достать без особых усилий. Каким было бы хорошее и эффективное решение для увеличения ударной нагрузки, чтобы событие мыши легко срабатывало?

1 Ответ

0 голосов
/ 05 апреля 2020

Наилучшим вариантом является управление минимальным радиусом окружности (радиусом, в котором он легко дотрагивается). Это означает, что если окружность не легко дотрагивается, когда радиус <5px, то оставьте минимальный радиус 5px. </p>

...