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

【问题标题】：D3.js / Javascript Node-Lines pop-up window and color changeD3.js / Javascript Node-Lines 弹出窗口和颜色变化
【发布时间】：2016-03-10 18:38:55
【问题描述】：

我正在研究 D3.js，我有一张带有线条和节点的地图。当我用鼠标点击它们时，我希望它们改变颜色并变厚，并且我想要一个显示它们 ID 的小弹出窗口。在弹出窗口的 HTML 上有一个函数 onmouseover。第一个问题：javascript中有没有像onmouseover这样的功能？第二个问题：当鼠标在特定节点或线上时，有什么办法可以改变颜色并使线或节点变粗。（如果 JQuery 有办法，我可以使用 JQuery）

【问题讨论】：

显示一些代码。有可能的！是的，JS 确实有鼠标悬停功能。
var node = svg.selectAll(".node") .data(Data.nodes) ... on("mouseover", function(){ d3.select(this).enter.append ("text") text(function(d) {return d.ID;}) });
没关系，您的评论。回调接收一个目标。您可以使用 this 来引用它。那应该拿起你的元素，然后在你的元素上应用你想要的任何东西。
随意撤消它 =] 这是一场激烈的辩论哈哈meta.stackexchange.com/questions/2950/…
嗯，在加拿大，我们经常使用问候和赞赏 :) @AtheistP3ace

标签： javascript jquery html d3.js

【解决方案1】：

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

首先，为工具箱创建容器：

 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){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>

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

【讨论】：

我在网上找到了这个，发现工具提示很复杂@thisOneGuy
它不是 d3.tooltip。它只是一个名为 tooltip 的变量。它创建一个 div 并在鼠标悬停时更改文本、mousemove、更改工具提示位置和 mouseout、隐藏工具提示。有什么这么复杂？对了，尽量不要把代码放在cmets里，难读：）

【解决方案2】：

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

<strong>this</strong> 是您想要处理的 node 元素。

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

【讨论】：

var node = svg.selectAll(".node") .data(thisData.nodes) .enter().append("circle") .attr("class", "node") 。 attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .style('stroke','red') .style("stroke- width", 1) .attr('r', 2) 这是我的一段代码，我已经有半径 = 2 的红色节点。我希望它们改变颜色，变厚并在我打开时显示弹出消息他们。
对不起，它没有得到这是一段代码，也不允许我添加代码的屏幕截图

【解决方案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;});

【讨论】：

你认为我的代码对你有帮助吗？如果是，请接受。
是的，但关于我需要的真正代码是我编写的代码。我在你的答案下为你写了代码，它已经很厚了，所以它不会改变我的元素@Pbd