산포로 플로팅하는 데이터 세트가 있습니다. 원 중 하나 위로 마우스를 가져 가면 데이터 (예 : x, y 값 등)가 팝업되도록하고 싶습니다. 다음은 내가 사용해 본 것입니다.
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function() {
d3.select(this).enter().append("text")
.text(function(d) {return d.x;})
.attr("x", function(d) {return x(d.x);})
.attr("y", function (d) {return y(d.y);}); });
어떤 데이터를 입력해야하는지 좀 더 정보가 필요하다고 생각합니까?
답변
나는 당신이 원하는 것이 툴팁이라고 가정합니다. 가장 쉬운 방법은 svg:title
각 원에 요소 를 추가하는 것입니다. 브라우저가 툴팁을 표시하고 마우스 핸들러가 필요하지 않기 때문입니다. 코드는 다음과 같습니다
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
...
.append("svg:title")
.text(function(d) { return d.x; });
답변
툴팁을 만드는 가장 좋은 방법은 다음과 같습니다. 간단한 D3 툴팁 예제
div를 추가해야합니다
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
그런 다음 사용하여 전환 할 수 있습니다
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top",
(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
d3.event.pageX
/ d3.event.pageY
는 현재 마우스 좌표입니다.
당신이 사용할 수있는 텍스트를 변경하려는 경우 tooltip.text("my tooltip text");
답변
최근에 발견 한 멋진 라이브러리가 있습니다. 사용하기 간단하고 결과는 매우 깔끔합니다 : d3-tip.
당신은 여기 에 예를 볼 수 있습니다 :
기본적으로, 당신이해야 할 일은 다운로드 ( index.js )이며 스크립트를 포함시키는 것입니다.
<script src="index.js"></script>
다음 지침을 따르십시오 여기 (예와 동일한 링크)
그러나 코드의 경우 다음과 같습니다.
방법을 정의하십시오 :
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
당신이 이미 당신처럼 svg를 만들
var svg = ...
메소드를 호출하십시오.
svg.call(tip);
객체에 팁을 추가하십시오.
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
...
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
CSS를 추가하는 것을 잊지 마십시오 :
<style>
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
답변
이와 같이 마우스 오버에 사용될 데이터를 전달할 수 있습니다. 마우스 오버 이벤트는 이전에 enter
ed 데이터가있는 함수를 인수 (및 두 번째 인수로 색인)로 사용 enter()
하므로 두 번째 로 사용할 필요가 없습니다 .
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function(d,i) {
d3.select(this).append("text")
.text( d.x)
.attr("x", x(d.x))
.attr("y", y(d.y));
});
답변
이 간결한 예는 d3에서 사용자 정의 툴팁을 작성하는 일반적인 방법을 보여줍니다.
var w = 500;
var h = 150;
var dataset = [5, 10, 15, 20, 25];
// firstly we create div element that we can use as
// tooltip container, it have absolute position and
// visibility: hidden by default
var tooltip = d3.select("body")
.append("div")
.attr('class', 'tooltip');
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// here we add some circles on the page
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h / 2)
.attr("r", function(d) {
return d;
})
// we define "mouseover" handler, here we change tooltip
// visibility to "visible" and add appropriate test
.on("mouseover", function(d) {
return tooltip.style("visibility", "visible").text('radius = ' + d);
})
// we move tooltip during of "mousemove"
.on("mousemove", function() {
return tooltip.style("top", (event.pageY - 30) + "px")
.style("left", event.pageX + "px");
})
// we hide our tooltip on "mouseout"
.on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
.tooltip {
position: absolute;
z-index: 10;
visibility: hidden;
background-color: lightblue;
text-align: center;
padding: 4px;
border-radius: 4px;
font-weight: bold;
color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>