Question

我正在研究D3.js，我有一个包含线条和节点的地图。当我用鼠标来它们时，我希望它们能够改变颜色并变得更厚，我想要一个小的弹出窗口来显示它们的ID。在弹出窗口的HTML上有一个函数onmouseover。第一个问题：在onmouseover等javascript中是否有任何功能？第二个问题：当鼠标在特定节点或线上时，我有什么方法可以改变颜色并使线条或节点更粗。（如果在JQuery中有一种方法，我可以使用JQuery）

Answer 1

对于工具提示，我有这个小提琴：http://jsfiddle.net/reko91/7NReF/36/

首先，为toolip创建容器：

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

然后在mouseover上将文本设置为您想要的，鼠标移动，移动工具提示和mouseout，隐藏工具提示：

circles.on("mouseover", function(d){return tooltip.style("visibility", "visible").text(d);})
.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");});

对于节点，您既可以直接设置样式，也可以添加一个类，并将其全部组合在一起。所以你只需要改变CSS。所以说上面的话，我已经在这个小提琴中实现了两个：http://jsfiddle.net/reko91/7NReF/37/

源代码：

var w = 500;
var h = 50;

var dataset = [ 5, 10, 15, 20, 25 ];

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

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;
       });
       
       
 var tooltip = d3.select("body")
    .append("div")
    .attr('class','tooltipdiv')
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");
    
    
circles.on("mouseover", function(d){
d3.select(this).classed('hovernode', true)
return tooltip.style("visibility", "visible").text(d);})
.on("mousemove", function(){return tooltip.style("top",
    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){
d3.select(this).classed('hovernode', false)
return tooltip.style("visibility", "hidden");});

.tooltipdiv{
  background:white;
}

.hovernode{
  fill:red;
  stroke:blue;
  stroke-width:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
    
</body>

我添加了更改节点边框的功能

Answer 2

var node = svg.selectAll(".node")
           .data(Data.nodes)
           .on("mouseover", function(){
           d3.select(this).style("stroke","thick"); // sample CSS operation.
})

this是您要处理的node元素。

我建议不要使用jquery。我不知何故觉得d3比jquery快，并且可以通过更好的控制实现类似的功能。

Answer 3

好的，我写了一段代码作为改变颜色的答案，它起作用了：

.on("mouseover", function(){
        d3.select(this)
          .attr("fill", "orange");
})

.on("mouseout", function(d){
        d3.select(this)
          .attr("fill", "rgb(0, 0, " +(d*10) + ")");
});

首先.on函数使其变为橙色（您可以根据需要更改颜色，第二个.on当您不再使用该元素时会生成原始颜色。

对于弹出窗口：

.append("title")
.text(function(d){return d;});

D3.js / Javascript Node-Lines弹出窗口和颜色变化

3 个答案: