javascript - d3.js 在悬停时传递多个函数

Question

我使用教程在鼠标悬停时获得此功能:

function arcTween(outerRadius, delay) {
    return function () {
        d3.select(this).transition().delay(delay).attrTween("d", function (d) {
            var i = d3.interpolate(d.outerRadius, outerRadius);
            return function (t) { d.outerRadius = i(t); return arc(d); };
        });
    };
} 

然后我以这种方式将其添加到饼图的各个部分:

.on("mouseover", arcTween(outerRadius, 0, 0))

但是，我还在饼图中的每个切片的 svg 中添加了文本标签，并且希望当您将鼠标悬停在不同的切片上时这些标签会消失。所以我在根据索引创建标签时给了这些标签ID，然后写了这两个方法:

function visibilityShow(dataSetSize) {
    for (var i = 0; i < dataSetSize; i++) {
        $("#" + i).show();
    }
}

function visibilityHide(index, dataSetSize) {
    for (var i = 0; i < dataSetSize; i++) {
        if (i === index) {
            $("#" + i).show();
        } else {
            $("#" + i).hide();
        }
    }
}

现在这些在真空中工作，但是当我尝试将它们放在鼠标悬停事件上时，它不会工作。 arcTween 停止工作，并且“i”始终为 0。这些是我尝试过的:

添加另一个 .on("mouseover", ...)

        .on("mouseover", arcTween(outerRadius, 0))
        .on("mouseover", visibility(0, dataSet.length));

还尝试通过以下方式传入索引:

        .on("mouseover", arcTween(outerRadius, 0))
        .on("mouseover", function (d, i) { return visibility(i, d.length) });

但是除了看似覆盖 arcTween() 调用之外，它总是传入 i = 0。

我也试过

.on("mouseover", function (d, i) {
     return function {
          arcTween(outerRadius, 0);
          visibility(i, d.length);
     }
})

有人有什么建议吗？ (我使用的是 v3，因为所有在线教程都已过时。)

谢谢!

编辑:代码片段

// This data will be gathered from API calls eventually
dataDefault = [];
dataController = [{ "label": "Example 1", "value": 1, "child": [{ "label": "Child 1", "value": 1 }] },
                  { "label": "Example 2", "value": 1, "child": [{ "label": "Child 1", "value": 1 }] },
                  { "label": "Example 3", "value": 1, "child": [{ "label": "Child 1", "value": 1 }] },
                  { "label": "Example 4", "value": 1, "child": [{ "label": "Child 1", "value": 1 }] },
                  { "label": "Example 5", "value": 1, "child": [{ "label": "Child 1", "value": 1 }] }];

var displaySize = 20;

// This is used to keep track of what data is showing
var mode = "Default";

// The amount of pixels the SVG will take up
var width = 600,
    height = 675;

// It's a donut, so it has an outer radius and an inner radius. 2r = width so r = width/2
var outerRadius = width / 2,
    innerRadius = outerRadius / 3;

// Default color function for deciding the colros of the donut slices
var color = d3.scale.category10();

// The pie function for deciding the size of the donut slices
var pie = d3.layout.pie()
    .value(function (d) { return d["value"]; });

// At first we use the default data to create the pie
var pieData = pie(dataDefault);

// Create an arc
var arc = d3.svg.arc()
    .innerRadius(innerRadius);

// Add an SVG tag to the document
var svg = d3.select("#graphs").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + outerRadius + "," + (outerRadius + 50) + ")");

// Append an link tag for each point of the data, then add an path tag inside each a tag
svg.selectAll("a")
    .data(pieData)
  .enter().append("a")
    .append("path")
    .each(function (d) { d.outerRadius = outerRadius - 20; })
    .attr("d", arc)
    .attr("fill", function (d, i) { return color(i); })
    .on("mouseover", arcTween(outerRadius, 0, 0))
    .on("mouseout", arcTween(outerRadius - 20, 150))
        .append("title")
        .text(function (d) { return d["value"] + " hits"; });

// Change the default data to the Apps data so it animates on load
changeToAPI("Controller", dataController);

// Function used to increase slice size on hover
function arcTween(outerRadius, delay) {
    return function () {
        d3.select(this).transition().delay(delay).attrTween("d", function (d) {
            var i = d3.interpolate(d.outerRadius, outerRadius);
            return function (t) { d.outerRadius = i(t); return arc(d); };
        });
    };
}

// Passes the color scale into the change function
function getColor(name) {
    // Get the remainder when / 3
    var bucket = hashify(name) % 4;

    // Setup the array of color functions
    var colors = [d3.scale.category10(), d3.scale.category20(), d3.scale.category20b(), d3.scale.category20c()];

    // Return the correct bucket
    return colors[bucket];
}

// Function used to swap the data being shown
function changeToAPI(name, dataSet) {
    // Don't update if the data is already showing

    // JavaScript doesn't short circuit?
    if (dataSet === null) {
        dataSet = [{ "label": "No data...", "value": 1 }];
        changeTo(name, dataSet);
    } else if (dataSet.length === 0) {
        dataSet = [{ "label": "No data...", "value": 1 }];
        changeTo(name, dataSet);
    } else {

        mode = name;

        // Get the new pie and color functions
        var newData = pie(dataSet);
        var newColor = getColor(name);

        // Remove the labels, titles, and tooltips
        svg.selectAll("text").remove();
        svg.selectAll("title").remove();
        // Line below fixes an error that doesn't cause issues, but makes the graph ugly :(
        svg.selectAll("a").remove();

        // Add the new slices if there are any
        var newSlices = svg.selectAll("a")
                            .data(newData);

        newSlices.enter()
            .append("a")
                .append("path")
                .style("cursor", "pointer");

        // Update the attributes of those slices and animate the transition
        newSlices.select("path")
                .each(function (d) { d.outerRadius = outerRadius - 20; })
                .transition()
                .attr("d", arc)
                .attr("fill", function (d, i) { return newColor(i); })
                .attr("title", function (d) { return d["value"]; });

        newSlices.selectAll("path")
                    .on("click", function (d) {
                        checkForChild(d["data"]["label"], d["data"]);
                    })
                    .on("mouseover.arcExpand", arcTween(outerRadius, 0))
                    .on("mouseover.textHide", function (d, i) {
                        visibilityHide(i, dataSet.length);
                    })
                    .on("mouseout.arcRetract", arcTween(outerRadius - 20, 150))
                    .on("mouseout.textShow", function (d, i) {
                        visibilityShow(dataSet.length);
                    });

        // Remove excess slices
        newSlices.exit().remove();

        // Add a title
        var title = svg.append("text")
            .attr("x", 0)
            .attr("y", -(outerRadius + 10))
            .style("text-anchor", "middle")
            .text("Distrubution of " + name + " Usage");

        // Add labels
        var labels = svg.selectAll(null)
            .data(newData)
            .enter()
                .append("text")
                .attr("fill", "white")
                .attr("id", function (d, i) { return i })
                .attr("transform", function (d) {
                    d.innerRadius = 0;
                    d.outerRadius = outerRadius;
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function (d, i) {
                    return dataSet[i]["label"];
                });

        // Add tooltips
        svg.selectAll("path").data(newData).append("title").text(function (d) { return d["value"] + " hits"; });

        svg.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", innerRadius)
        .style("fill", "white")
        .style("cursor", "pointer")
        .on("click", function () {
            changeToAPI("Controller", dataController);
        });

        // Adds back button if not at controller level
        if (dataSet !== dataController) {
            svg.append("text")
                .attr("x", 0)
                .attr("y", 12)
                .style("text-anchor", "middle")
                .style("color", "#efefef")
                .style("font-size", "40px")
                .text("Back");
        }
    }
}

function changeTo(name, dataSet) {
    // Don't update if the data is already showing

    // JavaScript doesn't short circuit?
    if (dataSet === null) {
        dataSet = [{ "label": "No data...", "value": 1 }];
    } else if (dataSet.length === 0) {
        dataSet = [{ "label": "No data...", "value": 1 }];
    }

    mode = name;

    // Get the new pie and color functions
    var newData = pie(dataSet);
    var newColor = getColor(name);

    // Remove the labels, titles, and tooltips
    svg.selectAll("text").remove();
    svg.selectAll("title").remove();
    // Line below fixes an error that doesn't cause issues, but makes the graph ugly :(
    //svg.selectAll("a").remove();

    // Add the new slices if there are any
    var newSlices = svg.selectAll("a")
                        .data(newData);

    newSlices.enter()
        .append("a")
            .append("path")
            .style("cursor", "pointer");

    // Update the attributes of those slices and animate the transition
    newSlices.select("path")
            .each(function (d) { d.outerRadius = outerRadius - 20; })
            .transition()
            .attr("fill", function (d, i) { return newColor(i); })
            .attr("d", arc)
            .attr("title", function (d) { return d["value"]; });

    newSlices.selectAll("path")
                .on("mouseover.arc", arcTween(outerRadius, 0))
                .on("mouseover.text", function (d, i) {
                    visibilityHide(i, dataSet.length);
                 })
                .on("mouseout.arc", arcTween(outerRadius - 20, 150))
                .on("mouseout.text", function (d, i) {
                    visibilityShow(dataSet.length);
                });

    // Remove excess slices
    newSlices.exit().remove();

    // Add a title
    svg.append("text")
        .attr("x", 0)
        .attr("y", -(outerRadius + 10))
        .style("text-anchor", "middle")
        .text(function (e) {
            var title = "Distrubution of " + name + " Usage";
            if (name === "Defualt") {
                title = "Loading..."
            }
            return title;
        });

    // Add labels
    svg.selectAll(null)
        .data(newData)
        .enter()
            .append("text")
            .attr("fill", "white")
            .attr("id", function (d, i) { return i })
            .attr("transform", function (d) {
                d.innerRadius = 0;
                d.outerRadius = outerRadius;
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function (d, i) {
                return dataSet[i]["label"];
            });

    // Add tooltips
    svg.selectAll("path").data(newData).append("title").text(function (d) { return d["value"] + " hits"; });
}

function checkForChild(name, dataSet) {
    if (dataSet.hasOwnProperty("child")) {
        if (dataSet["child"] !== null) {
            if (dataSet["child"].length !== 0) {
                changeToAPI(name, dataSet["child"]);
            }
        }
    }
}

// Hashcode generator for strings
function hashify(string) {
    var hash = 0;

    // Add the value of each char to the hash value
    for (var i = 0; i < string.length; i++) {
        hash += string.charCodeAt(i);
    }

    return hash;
}

function visibilityShow(dataSetSize) {
    for (var i = 0; i < dataSetSize; i++) {
        $("#" + i).show();
    }
}

function visibilityHide(index, dataSetSize) {
    for (var i = 0; i < dataSetSize; i++) {
        if (i === index) {
            $("#" + i).show();
        } else {
            $("#" + i).hide();
        }
    }
}

body {
    font-family: Arial;
    transition: all ease .5s;
    text-align: center;
    color: rgb(58,58,58);
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>General Statistics</title>
</head>
<body>
    <div id="graphs">
    </div>
</body>
</html>

Answer 1

如果您在同一选择中有多个相同类型的事件监听器，则必须命名空间您的事件监听器(但这可能无法解决您的问题，另请阅读 < em>Post Scriptum 再往下)。

现在的问题，正如@AndrewReid 在 his comment 中解释的那样, 是下一个事件监听器删除了前一个。根据API :

If an event listener was already registered for the same type on the selected element, the existing listener is removed before the new listener is added.

让我们在下面的演示中看到它。

因为你没有提供你的工作代码，我在这里创建一个简单的，有两个事件监听器:第一个增加圆圈，第二个淡出文本:

.on("mouseover", increaseCircle)//this one will not work!
.on("mouseover", fadeText)//only this one will work...

你可以看到只有最后一个有效:

var svg = d3.select("svg");

var circle = svg.append("circle")
  .attr("r", 20)
  .attr("cx", 100)
  .attr("cy", 50)
  .attr("fill", "tan")
  .attr("stroke", "black")
  .on("mouseover", increaseCircle)
  .on("mouseover", fadeText)
  .on("mouseout", function() {
    circle.transition().duration(500).attr("r", 20);
    text.transition().duration(500).style("opacity", 1);
  })

var text = svg.append("text")
  .attr("y", 55)
  .attr("x", 150)
  .style("font-family", "helvetica")
  .text("Hover over the circle");

function increaseCircle() {
  circle.transition().duration(500).attr("r", 40)
}

function fadeText() {
  text.transition().duration(500).style("opacity", 0)
}

<script src="https://d3js.org/d3.v3.js"></script>
<svg></svg>

解决方案:

不过，有一个非常简单的解决方案。根据相同的 API:

To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as "click.foo" and "click.bar"

因此，在上面的演示中，我们只需要这样的东西:

.on("mouseover.circle", increaseCircle)
.on("mouseover.text", fadeText)

这是演示，两个事件监听器都可以工作:

var svg = d3.select("svg");

var circle = svg.append("circle")
  .attr("r", 20)
  .attr("cx", 100)
  .attr("cy", 50)
  .attr("fill", "tan")
  .attr("stroke", "black")
  .on("mouseover.circle", increaseCircle)
  .on("mouseover.text", fadeText)
  .on("mouseout", function() {
    circle.transition().duration(500).attr("r", 20);
    text.transition().duration(500).style("opacity", 1);
  })

var text = svg.append("text")
  .attr("y", 55)
  .attr("x", 150)
  .style("font-family", "helvetica")
  .text("Hover over the circle");

function increaseCircle() {
  circle.transition().duration(500).attr("r", 40)
}

function fadeText() {
  text.transition().duration(500).style("opacity", 0)
}

<script src="https://d3js.org/d3.v3.js"></script>
<svg></svg>

当然，一个简单的替代方法就是:

selection.on("mouseover", function(){
    foo();
    bar();
    baz();
    etc...
});

---

PS:上面的回答涉及命名空间问题。但是，除了这个问题之外，您的代码还有一些问题，我们无法测试这些问题，因为您没有提供有效的演示。

第一个问题:当你这样做的时候......

.on("mouseover", arcTween(outerRadius, 0, 0))

...您正在立即调用 arcTween，并将其值传递给监听器。你可能想要:

.on("mouseover", function(){ arcTween(outerRadius, 0, 0)})

其次，这是不正确的:

.on("mouseover", function (d, i) {
    return function {
        arcTween(outerRadius, 0);
        visibility(i, d.length);
    }
})

应该是:

.on("mouseover", function (d, i) {
    arcTween(outerRadius, 0);
    visibility(i, d.length);
})