Question

当鼠标悬停在特定弧或切片上时，我想突出显示节点文本。鼠标悬停在弧或切片上的级别1在鼠标悬停时突出显示，但nodetext未突出显示。对于第2层，将鼠标悬停在突出显示的弧或切片上，但不显示节点文本。如果我独立运行它们，它将运行。当我只运行切片高亮代码时，它可以工作，当我运行nodetext高亮时，它可以工作，但不能同时工作。

为了突出显示切片，我使用了以下代码

    var typeMouseOver = function (d, i) {                

            var thisObject = d3.select(this);
            var typeValue = thisObject.attr("type_value");
            var strippedTypeValue = typeValue.replace(/ /g, "_");


            var pie1ArcsSelector = "." + "pie1-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie1ArcsSelector);                       
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SectionOverColor); })               
            //alert(typeValue);

            var pie2ArcsSelector = "." + "pie2-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie2ArcsSelector);               
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SubGroupsOverColor); })                        

            };

        var typeMouseOut = function() {            

            var thisObject = d3.select(this);
            var typeValue = thisObject.attr("type_value");                
            var strippedTypeValue = typeValue.replace(/ /g, "_");

            var pie1ArcsSelector = "." + "pie1-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie1ArcsSelector);               
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SectionUpColor); })

            var pie2ArcsSelector = "." + "pie2-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie2ArcsSelector);              
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SubGroupsUpColor); })              

        };

为了突出显示节点文本，我使用了以下代码

     var LabelMouseOver = function () {
                     d3.select(this).select("text")
                     .style("fill", function (d) { return d3.rgb(d.data.SectionFontOverColor); })
                 };

两者结合起来时，代码看起来如下所示：幻灯片高亮和节点文本高亮，

 var typeMouseOver = function (d, i) {

            d3.select(this).select("text")
                .style("fill", function (d) { return d3.rgb(d.data.SectionFontOverColor); })


            var thisObject = d3.select(this);
            var typeValue = thisObject.attr("type_value");
            var strippedTypeValue = typeValue.replace(/ /g, "_");


            var pie1ArcsSelector = "." + "pie1-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie1ArcsSelector);                       
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SectionOverColor); })                
            //alert(typeValue);
            //alert("#text");

            var pie2ArcsSelector = "." + "pie2-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie2ArcsSelector);               
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SubGroupsOverColor); })                        

            };

        var typeMouseOut = function () {


            d3.select(this).select("text")
                .style("fill", function (d) { return d3.rgb(d.data.SectionFontUpColor); })

            var thisObject = d3.select(this);
            var typeValue = thisObject.attr("type_value");                
            var strippedTypeValue = typeValue.replace(/ /g, "_");

            var pie1ArcsSelector = "." + "pie1-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie1ArcsSelector);               
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SectionUpColor); })

            var pie2ArcsSelector = "." + "pie2-" + strippedTypeValue;
            var selectedArcs = d3.selectAll(pie2ArcsSelector);              
            selectedArcs.style("fill", function (d) { return d3.rgb(d.data.SubGroupsUpColor); })              

        };

但是第三个代码段不起作用，我无法找到为什么它不起作用的任何线索，也无法理解将它们组合在一起时出了什么问题。当我在类型的鼠标悬停中添加用于节点文本悬停的代码时，它仅突出显示切片而不是节点文本，而对于标签鼠标悬停在其上面突出显示仅文本而不是切片。如何在我的函数中获取文本值及其相关的ID，以便可以同时在1级和2级中使用它。我需要同时根据其受尊重的ID同时使用slice高亮和nodetext高亮。请帮忙。

平台Windows 10 Visual Studio 2013 d3.v4.min.js

Answer 1

我可以解决问题。我将两个功能分开。现在它们工作正常，请查看标签突出显示功能。

var MouseOverLevel1Label =函数（d，i）{

            var thisObject = d3.select(this).select("text");
            var LText = thisObject.attr("L_Text");
            var strippedTypeValue = LText.replace(/ /g, "_");


            var pie1Label = "." + "pie1-" + strippedTypeValue;
            var selectedText = d3.select(pie1Label);
            selectedText.style("fill", function (d) { return d3.rgb(d.data.SectionFontOverColor); });               

            var pie2Lable = "." + "pie2-" + strippedTypeValue;
            var selectedText = d3.selectAll(pie2Lable);
            selectedText.style("fill", function (d) { return d3.rgb(d.data.SubGroupsFontOverColor); })


        };

高亮显示节点文本和鼠标悬停在特定弧或切片上的切片

1 个答案: