Question

我在更改工具提示所用元素的颜色时显示工具提示时遇到问题。我可以注释掉工具提示代码，并且元素的笔触颜色也会改变，但是我需要工具提示和类更改才能发生。任何帮助是极大的赞赏。这就是我所说的：



    var svg = d3.select("#app_dataPlane")
        .append("svg")
        .attr("width", width)
        .attr("height", height);


    var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function (d) {
            return "<strong>DPID:</strong> <span style='color:red'>" + d.name + "</span><br />" + "<strong>State:</strong> <span style='color:red'>" + d.state + "</span>";
        })

    svg.call(tip);


    var link = svg.selectAll(".link")
        .data(topoObj.links)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", 2)
        .on("mouseover", function (d) {
            d3.selectAll(".link").classed("selectedLink", false);
            d3.select(this).classed("selectedLink", true);
            d3.select("#app_srcSwitch").html(d.source.name);
            d3.select("#app_destSwitch").html(d.target.name);
        });

    var node = svg.selectAll(".switch")
        .data(topoObj.nodes)
        .enter()
        .append("circle")
        .attr("r", 6)
        .attr("stroke", "white")
        .attr("class","switch")
        .attr("fill", function (d) {
            if (d.group == 1) {
                return "#15a9ff";
            } else if (d.group == 2) {
                return "#f98802";
            } else if (d.group == 3) {
                return "#ca5eff";
            } else if (d.group == 4) {
                return "#37a302";
            } else if (d.group == 5) {
                return "#00a4b0";
            } else if (d.group == 6) {
                return "#ff6054";
            } else if (d.group == 7) {
                return "#7b75ff";
            } else if (d.group == 8) {
                return "#b77264";
            } else {
                return "#8c8c8c";
            }
        })
        .on('mouseover', function (d) {
            d3.selectAll(".switch").classed("selectedSwitch", false);
            d3.select(this).classed("selectedSwitch", true);
            d3.select("#app_stateInfo").html(d.state);
            d3.select("#app_dpidInfo").html(d.name);
            d3.select("#app_InstanceInfo").html(d.onosInstance);                
        })


        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)


        .call(force.drag);

Answer 1

对.on("mouseover", ...)的后续调用会覆盖您之前设置的内容。要组合几件事，请在处理函数中执行它们：

.on('mouseover', function (d) {
        d3.selectAll(".switch").classed("selectedSwitch", false);
        d3.select(this).classed("selectedSwitch", true);
        d3.select("#app_stateInfo").html(d.state);
        d3.select("#app_dpidInfo").html(d.name);
        d3.select("#app_InstanceInfo").html(d.onosInstance);
        tip.show();
 });

D3工具提示不显示

1 个答案: