單擊帶有D3.js的元素后，防止鼠標移動操作

Question

我想在用戶單擊此元素時阻止元素的mouseout操作。 舉個例子，看看這個JSFiddle （即使我點擊標簽，圓圈也會消失）。

有沒有一種簡單的方法來實現我的目標與d3.js？ 謝謝！

JSFiddle示例代碼：

var svg = d3.select("#content")
                        .append("svg")
            .attr("width", 600)
            .attr("height", 400);
var g = svg.append("g");
var text = g.append("text")
                            .text("Click me")
              .style("fill", "Blue")
              .attr("x", 50)
              .attr("y", 50)
              .on("mouseover", mouseover)
              .on("mouseout", mouseout)
              .on("click", click);

var circle = g.append("circle")
                                .style("fill", "Orange")
                .attr("cx", 150)
                .attr("cy", 90)
                .attr("r", 15)
                .classed("hide", true)
                .classed("someClass", true);

function mouseover(p){
    d3.selectAll("circle.someClass").classed("hide", false);
}
function mouseout(p){
    d3.selectAll("circle.someClass").classed("hide", true);
}
function click(p){
    d3.selectAll("circle.someClass").classed("hide", false);
}

Answer 1

如果您計划只有一個控制圓圈的元素，請使用“標記”。 有條件地注冊/取消注冊事件是不是一個好主意。

檢查你的小提琴的這個更新版本：

https://jsfiddle.net/cze9rqf7/

var svg = d3.select("#content")
          .append("svg")
          .attr("width", 600)
          .attr("height", 400);
var g = svg.append("g");
var text = g.append("text")
          .text("Click me")
          .style("fill", "Blue")
          .attr("x", 50)
          .attr("y", 50)
          .on("mouseover", mouseover)
          .on("mouseout", mouseout)
          .on("click", click);

var circle = g.append("circle")
          .style("fill", "Orange")
          .attr("cx", 150)
          .attr("cy", 90)
          .attr("r", 15)
          .classed("hide", true)
          .classed("someClass", true);

var isClicked = false;

function mouseover(p){
    d3.selectAll("circle.someClass").classed("hide", false);
}

function mouseout(p){
    if(!isClicked) {
        d3.selectAll("circle.someClass").classed("hide", true);
    }
}

function click(p){
    isClicked = !isClicked;
    d3.selectAll("circle.someClass").classed("hide", false);
}

編輯評論

如果您需要“記住”每個元素的狀態，而不是使用全局，那么您應該對這些元素使用數據綁定：

var text = g.append("text")
  .datum({isClicked: false})
  .text("Click me")
  ...

function mouseout(p){
    // p is the data-bound object
    if(!p.isClicked) {
        var className = d3.select(this).attr("class");
        d3.selectAll("circle."+className).classed("hide", true);
  }
}

function click(p){
    // on click edit the data-bound object
    p.isClicked = !p.isClicked;
    var className = d3.select(this).attr("class");
    d3.selectAll("circle."+className).classed("hide", false);
}

這里更新了小提琴。

Answer 2

這是一個沒有任何“旗幟”的答案：

鑒於您有許多標簽，一個選項是刪除單擊元素的mouseout ：

d3.select(this).on("mouseout", null);

這是您更新的小提琴： https ： //jsfiddle.net/gerardofurtado/38p18pLt/

和Stack片段中的相同代碼：

 var svg = d3.select("body") .append("svg") .attr("width", 600) .attr("height", 400); var g = svg.append("g"); var text = g.append("text") .text("Click me") .style("fill", "Blue") .attr("x", 50) .attr("y", 50) .classed("someClass", true) .on("mouseover", mouseover) .on("mouseout", mouseout) .on("click", click); var text2 = g.append("text") .text("Click me") .style("fill", "Blue") .attr("x", 50) .attr("y", 150) .classed("someClass2", true) .on("mouseover", mouseover) .on("mouseout", mouseout) .on("click", click); var circle = g.append("circle") .style("fill", "Orange") .attr("cx", 150) .attr("cy", 90) .attr("r", 15) .classed("hide", true) .classed("someClass", true); var circle2 = g.append("circle") .style("fill", "Green") .attr("cx", 250) .attr("cy", 90) .attr("r", 15) .classed("hide", true) .classed("someClass2", true); function mouseover(p) { var className = d3.select(this).attr("class"); d3.selectAll("circle." + className).classed("hide", false); } function mouseout(p) { var className = d3.select(this).attr("class"); d3.selectAll("circle." + className).classed("hide", true); } function click(p) { d3.select(this).on("mouseout", null); var className = d3.select(this).attr("class"); d3.selectAll("circle." + className).classed("hide", false); } 

 .hide { display: none; } text { cursor: pointer; } 

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

您還可以切換單擊，使mouseout再次工作：

if(d3.select(this)[0][0].__onmouseout){
    d3.select(this).on("mouseout", null);
} else {
    d3.select(this).on("mouseout", mouseout);
}

這是“切換”功能的小提琴： https ： //jsfiddle.net/gerardofurtado/4zb9gL9r/1/

和Stack片段中的相同代碼：

 var svg = d3.select("body") .append("svg") .attr("width", 600) .attr("height", 400); var g = svg.append("g"); var text = g.append("text") .text("Click me") .style("fill", "Blue") .attr("x", 50) .attr("y", 50) .classed("someClass", true) .on("mouseover", mouseover) .on("mouseout", mouseout) .on("click", click); var text2 = g.append("text") .text("Click me") .style("fill", "Blue") .attr("x", 50) .attr("y", 150) .classed("someClass2", true) .on("mouseover", mouseover) .on("mouseout", mouseout) .on("click", click); var circle = g.append("circle") .style("fill", "Orange") .attr("cx", 150) .attr("cy", 90) .attr("r", 15) .classed("hide", true) .classed("someClass", true); var circle2 = g.append("circle") .style("fill", "Green") .attr("cx", 250) .attr("cy", 90) .attr("r", 15) .classed("hide", true) .classed("someClass2", true); function mouseover(p) { var className = d3.select(this).attr("class"); d3.selectAll("circle." + className).classed("hide", false); } function mouseout(p) { var className = d3.select(this).attr("class"); d3.selectAll("circle." + className).classed("hide", true); } function click(p) { if (d3.select(this)[0][0].__onmouseout) { d3.select(this).on("mouseout", null); } else { d3.select(this).on("mouseout", mouseout); } var className = d3.select(this).attr("class"); d3.selectAll("circle." + className).classed("hide", false); } 

 .hide { display: none; } text { cursor: pointer; } 

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