我已经尝试过代码,但它正常工作。你能建议一种解决错误的方法吗?我是Visualization的新手,也是d3.js
的开始阶段<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> </script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function() {d3.select(this).append("text").attr("fill","blue").text("fill aliceblue");})
</script>
</body>
</html>
答案 0 :(得分:2)
您正在尝试将文本元素附加到圆圈,这是不可能的。 创建一个组元素,并将圆和文本元素添加到该组。 这是一个例子。
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
var grp = sampleSVG.append("g");
var circle = grp.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50);
circle.on("mouseover", function() {
grp.append("text")
.style("fill", "black")
.attr("x", 32)
.attr("y", 52)
.text("Hello");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz"></div>
答案 1 :(得分:0)
正如此处所示:https://stackoverflow.com/a/16780756/1023562
创建工具提示div并将其附加到mouseover
,mousemove
和mouseout
个事件。
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.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");});
工作小提琴:https://jsfiddle.net/vc95wcvm/
请注意,在这个小提琴中我已经在脚本面板中加载了http://d3js.org/d3.v2.js(因为Fiddle拒绝通过http加载它,它需要https),所以您感兴趣的代码位于脚本的底部面板即可。