Почему подсказка не движется с помощью мыши? - PullRequest
Новая
       0

Почему подсказка не движется с помощью мыши?

0 голосов
/ 24 декабря 2018

Это код для создания круговой диаграммы.

Я добавил 2 функции в круговую диаграмму.Во-первых, нужно увеличить размер дуги при наведении на нее мыши.

Во-вторых, при наведении курсора всплывающая подсказка отображает y положение мыши, и эта подсказка перемещается вместе с мышью.

Но проблема со мной в том.Текст всплывающей подсказки не движется при движении мыши.

Я видел различные ссылки переполнения стека для этого , но я не могу найти решение.Ниже я также приложил ссылки, чтобы вопрос не был отмечен как дубликат.

Пожалуйста, не давайте мне новый код для всплывающей подсказки.Исправьте это .

Ниже приведены ссылки, которые я уже посетил
Почему моя подсказка D3.js не работает
D3 - Всплывающая подсказкаэлемент SVG не работает
Всплывающие подсказки не отображаются при наведении мыши и на

Ссылка jsfiddle: - https://jsfiddle.net/uoh1bsrp/ Спасибо,
Шубхам Шарма

width = 600
height = 600

svg = d3.select('body').append('svg').attr('width',width).attr('height',height).append('g').attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
a = [2,5,7]
pie = d3.pie()
radius = 150

arc = d3.arc().innerRadius(0)
.outerRadius(radius);
arcs = svg.selectAll('arc').data(pie(a)).enter().append('g')
arcs.append("path").attr('d',function(d){return arc(d)})

tooltip  = svg.append('text')

color = ['red','green','blue']
path = d3.selectAll('path').style('fill',function(d,i){return color[i]})

path.on('mouseover',handlemouseover)
path.on('mouseout',handlemouseout)
path.on('mousemove',handlemousemove)



function handlemouseover(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0)
    .outerRadius(180)(d)});

}


function handlemousemove(){
	// svg.append('text').text(function(){return 'shubham'}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px')
	tooltip.text(function(){return d3.event.layerX}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px').style('display','block');
}


function handlemouseout(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0).outerRadius(radius)(d)});
	tooltip.style('display', 'none');
}
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
</head>

Ответы [ 3 ]

0 голосов
/ 24 декабря 2018

Это потому, что вы пытаетесь увеличить top свойство тега text в SVG.Это свойство просто не работает.Вы можете использовать translate вместо него или просто использовать теги, такие как div или span.Проверьте скрипку https://jsfiddle.net/fr71t0o3/3/:

function handlemousemove() {
  // svg.append('text').text(function(){return 'shubham'}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px')
  tooltip
    .text(function() {
        return d3.event.layerX;
    })
    .style('transform', `translate(${d3.event.layerX - 300}px, ${d3.event.layerY - 300}px)`)
    .style('display', 'block').style('color','red');
}

Я не уверен в смещении всплывающей подсказки, если вы хотите, чтобы оно двигалось с помощью мыши, вы можете использовать координаты мыши.

0 голосов
/ 24 декабря 2018

Вы должны добавить div и добавить к нему стили CSS.

Рабочая jsfiddle: https://jsfiddle.net/amp42fjn/

var tooltip = d3.select("body")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .text("a simple tooltip");  



    path.on("mouseover",handlemouseover)
    path.on("mousemove", handlemousemove)
    path.on("mouseout", handlemouseout);


            function handlemouseover(){
                d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0)
                .outerRadius(180)(d)});
                tooltip.style("visibility", "visible");

            }
            function handlemousemove(){

tooltip.text(function(){return d3.event.layerX}).style('top',(d3.event.layerY + 10)+'px').style("top",
        (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
            }
            function handlemouseout(){
                d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0).outerRadius(radius)(d)});

        tooltip.style("visibility", "hidden");
            }
0 голосов
/ 24 декабря 2018

Вместо .style('left', /*[...]*/) и .style('top', /*[...]*/) вы можете использовать .attr('x', [...]) и .attr('y', [...])

Также вы должны вычесть height/2 из y и width/2 из x,поскольку атрибуты x и y перемещают текст относительно его родителя : 

width = 600
height = 600

svg = d3.select('body').append('svg').attr('width',width).attr('height',height).append('g').attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
a = [2,5,7]
pie = d3.pie()
radius = 150

arc = d3.arc().innerRadius(0)
.outerRadius(radius);
arcs = svg.selectAll('arc').data(pie(a)).enter().append('g')
arcs.append("path").attr('d',function(d){return arc(d)})

tooltip  = svg.append('text')

color = ['red','green','blue']
path = d3.selectAll('path').style('fill',function(d,i){return color[i]})

path.on('mouseover',handlemouseover)
path.on('mouseout',handlemouseout)
path.on('mousemove',handlemousemove)



function handlemouseover(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0)
    .outerRadius(180)(d)});

}


function handlemousemove(){
	// svg.append('text').text(function(){return 'shubham'}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px')
	tooltip.text(function(){return d3.event.layerX}).attr('y',(d3.event.layerY - height/2 + 10)+'px').attr('x',(d3.event.layerX - width/2 + 10) + 'px').style('display','block');
}


function handlemouseout(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0).outerRadius(radius)(d)});
	tooltip.style('display', 'none');
}
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
</head>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...